From 44e9930557a6ac75d950bc138ca8a99e1a4399ad Mon Sep 17 00:00:00 2001 From: Benjamin Vray Date: Tue, 24 Jan 2023 15:00:23 +0000 Subject: [PATCH] [FIX] website_editor: fix items width in we-list when dragging them This commit fixes an issue with the width of items in the we-list not being correct when they are being dragged using jQuery's sortable feature. Steps to reproduce the bug: - Drop a "Form" snippet on a page. - Add a "Multiple Checkboxes" field in the form. - Move an option from the list using the move button. - Bug: while dragging the item, the width of the items is too small. When an element is dragged, it is given an absolute position which takes it out of the normal flow of the document, causing the input element within the list item to no longer be able to correctly occupy 100% of the available width. task-3138662 closes odoo/odoo#114343 X-original-commit: e0a4ed0b21a9f87678e13609ff597cf1b3ae4189 Signed-off-by: Guillaume-gdi --- addons/web_editor/static/src/scss/wysiwyg_snippets.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 9723009964a..d12a1e95d09 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -1420,13 +1420,20 @@ font-family: $o-we-sidebar-content-field-input-font-family; } tr { + // Since the sortable list's loses its connection with + // the table when dragged, the with the input no longer + // takes up the full width, causing a visual issue. To solve + // this problem, we added the 'flex' display property. + display: flex; + align-items: center; border: none; } td { + flex-grow: 1; padding-bottom: $o-we-sidebar-content-field-spacing / 2; &:not(.o_we_list_record_name) { - width: 1px; + flex-grow: 0; } we-button.o_we_checkbox_wrapper {