Make nm filters always the same size (33% each) and show ellipsis when the current value is too long

This commit is contained in:
nathan 2022-08-23 11:07:02 -06:00
parent db7b9f0abb
commit 19d4b9a8b6
2 changed files with 11 additions and 3 deletions

View File

@ -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) */

View File

@ -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 {