[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 <gdi@odoo.com>
This commit is contained in:
Benjamin Vray
2023-03-03 18:11:05 +01:00
parent 3ec250e709
commit 44e9930557
@@ -1420,13 +1420,20 @@
font-family: $o-we-sidebar-content-field-input-font-family;
}
tr {
// Since the sortable list's <tr> loses its connection with
// the table when dragged, the <td> 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 {