pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web: SelectMenu: Truncate selected value while keeping auto width

Browse Source 
Before this commit:
When the label of the selected value was too long, the SelectMenu width
would grow indefinitely to accomodate, this behaviour was causing some
layouts to break.

After this commit:
The width of the SelectMenu is still automatic and will try to fill its
parent but will not make it grow. Instead, if the label is too long and
does not fit in the parent, it will be truncated.

Solution:
Using a grid display we can easly set the label to auto and truncate it
while keeping a constant size for the icons.

closes odoo/odoo#115799

Related: odoo/enterprise#37285
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
This commit is contained in:
Bastien Fafchamps (bafa)
2023-04-03 13:55:18 +02:00
committed by Lucas Perais
parent 7a6a64068b
commit dfda7a14c1
2 changed files with 20 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/core/select_menu/select_menu.scss
+19 -4
View File
@@ -1,12 +1,27 @@
.o_select_menu {
.o_select_menu_toggler {
display: grid;
grid-template-columns: auto 25px;
}
.o_select_menu_toggler.o_can_deselect {
grid-template-columns: auto 25px 25px;
}
.o_select_menu_toggler_slot {
flex-grow: 2;
}
.o_select_menu_toggler_caret,
.o_select_menu_toggler_clear {
width: 2rem;
flex-basis: 1;
.o_select_menu_toggler_caret {
grid-column: 2;
}
.o_can_deselect .o_select_menu_toggler_caret {
grid-column: 3;
}
.o_select_menu_toggler_clear {
grid-column: 2;
}
.o_select_menu_toggler_clear:hover i {
color: red;
}
addons/web/static/src/core/select_menu/select_menu.xml
+1 -1
View File
@@ -4,7 +4,7 @@
<t t-name="web.SelectMenu" owl="1">
<Dropdown
class="`o_select_menu border w-auto rounded-2 overflow-hidden ${props.class || ''}`"
togglerClass="`o_select_menu_toggler btn btn-secondary w-100 bg-light ${props.togglerClass || ''}`"
togglerClass="`o_select_menu_toggler btn btn-secondary w-100 bg-light ${props.togglerClass || ''} ${canDeselect ? 'o_can_deselect' : ''}`"
menuClass="`o_select_menu_menu${props.searchable ? ' pt-0' : ''}${props.multiSelect ? ' o_select_menu_multi_select' : ''}`"
position="'bottom-fit'"
beforeOpen.bind="filterOptions"