diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts index d88bb08943..9b169a554d 100644 --- a/api/js/etemplate/Et2Select/Et2Select.ts +++ b/api/js/etemplate/Et2Select/Et2Select.ts @@ -85,6 +85,13 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect) .dropdown__panel { overflow-x: clip; } + /* Ellipsis when too small */ + .select__label { + display: block; + text-overflow: ellipsis; + /* This is usually not used due to flex, but is the basis for ellipsis calculation */ + width: 10ex; + } /** multiple=true uses tags for each value **/ /* styling for icon inside tag (not option) */ diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css index 0d791e5fc3..74cb576af9 100644 --- a/api/templates/default/etemplate2.css +++ b/api/templates/default/etemplate2.css @@ -93,6 +93,7 @@ ::part(form-control-input) { flex: 1 1 auto; position: relative; + max-width: 100%; } ::part(form-control-help-text) { @@ -2217,9 +2218,9 @@ lion-validation-feedback[type] { width: 12em; } -.nextmatch_header_row > div > et2-select, .nextmatch_header_row > div > et2-select-cat { - max-width: 14%; - min-width: fit-content; +.nextmatch_header_row > .filtersContainer > et2-select, .nextmatch_header_row > .filtersContainer > et2-select-cat { + /* Make all filters the same size. Otherwise they'll flex for different sized values */ + max-width: 33%; } .nextmatch_header_row > .header_row_right {