mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-12-22 14:41:29 +01:00
Et2Select: Turn off line wrapping in options
This commit is contained in:
nathan
parent
f2710b4749
commit
f4bb3d5709
@ -102,151 +102,157 @@ export class Et2Select extends Et2WithSearchMixin(Et2WidgetWithSelect)
|
|||||||
shoelace,
|
shoelace,
|
||||||
super.styles,
|
super.styles,
|
||||||
css`
|
css`
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
flex: 1 0 auto;
|
flex: 1 0 auto;
|
||||||
--icon-width: 20px;
|
--icon-width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-control--has-label::part(form-control-label) {
|
.form-control--has-label::part(form-control-label) {
|
||||||
margin-right: var(--sl-spacing-medium);
|
margin-right: var(--sl-spacing-medium);
|
||||||
}
|
}
|
||||||
|
|
||||||
::slotted(img), img {
|
::slotted(img), img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Get rid of padding before/after options */
|
/* No wrapping */
|
||||||
sl-menu::part(base) {
|
|
||||||
padding: 0px;
|
|
||||||
}
|
|
||||||
/* No horizontal scrollbar, even if options are long */
|
|
||||||
.dropdown__panel {
|
|
||||||
overflow-x: clip;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ellipsis when too small */
|
sl-option::part(base) {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
::part(tags) {
|
/* No horizontal scrollbar, even if options are long */
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
.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 **/
|
.dropdown__panel {
|
||||||
/* styling for icon inside tag (not option) */
|
overflow-x: clip;
|
||||||
|
}
|
||||||
|
|
||||||
.tag_image {
|
/* Ellipsis when too small */
|
||||||
margin-right: var(--sl-spacing-x-small);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Maximum height + scrollbar on tags (+ other styling) */
|
::part(tags) {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
::part(tags) {
|
.select__label {
|
||||||
overflow-y: auto;
|
display: block;
|
||||||
margin-left: 0px;
|
text-overflow: ellipsis;
|
||||||
max-height: initial;
|
/* This is usually not used due to flex, but is the basis for ellipsis calculation */
|
||||||
min-height: auto;
|
width: 10ex;
|
||||||
gap: 0.1rem 0.5rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
:host([rows]) ::part(tags) {
|
/** multiple=true uses tags for each value **/
|
||||||
max-height: calc(var(--rows, 5) * (var(--sl-input-height-medium) * 0.8))
|
/* styling for icon inside tag (not option) */
|
||||||
}
|
|
||||||
|
.tag_image {
|
||||||
|
margin-right: var(--sl-spacing-x-small);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Maximum height + scrollbar on tags (+ other styling) */
|
||||||
|
|
||||||
|
::part(tags) {
|
||||||
|
overflow-y: auto;
|
||||||
|
margin-left: 0px;
|
||||||
|
max-height: initial;
|
||||||
|
min-height: auto;
|
||||||
|
gap: 0.1rem 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([rows]) ::part(tags) {
|
||||||
|
max-height: calc(var(--rows, 5) * (var(--sl-input-height-medium) * 0.8))
|
||||||
|
}
|
||||||
|
|
||||||
:host([readonly][rows='1']) ::part(tags) {
|
:host([readonly][rows='1']) ::part(tags) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* No rows set, default height limit about 5 rows */
|
/* No rows set, default height limit about 5 rows */
|
||||||
|
|
||||||
:host(:not([rows])) ::part(tags) {
|
:host(:not([rows])) ::part(tags) {
|
||||||
max-height: 11em;
|
max-height: 11em;
|
||||||
}
|
}
|
||||||
|
|
||||||
select:hover {
|
select:hover {
|
||||||
box-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
|
box-shadow: 1px 1px 1px rgb(0 0 0 / 60%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide dropdown trigger when multiple & readonly */
|
/* Hide dropdown trigger when multiple & readonly */
|
||||||
|
|
||||||
:host([readonly][multiple]:not([rows='1']))::part(expand-icon) {
|
:host([readonly][multiple]:not([rows='1']))::part(expand-icon) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Style for tag count if rows=1 */
|
/* Style for tag count if rows=1 */
|
||||||
|
|
||||||
.tag_limit {
|
.tag_limit {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
box-shadow: rgb(0 0 0/50%) -1.5ex 0px 1ex -1ex, rgb(0 0 0 / 0%) 0px 0px 0px 0px;
|
box-shadow: rgb(0 0 0/50%) -1.5ex 0px 1ex -1ex, rgb(0 0 0 / 0%) 0px 0px 0px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag_limit::part(base) {
|
.tag_limit::part(base) {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: var(--sl-input-background-color);
|
background-color: var(--sl-input-background-color);
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-bottom-left-radius: 0;
|
border-bottom-left-radius: 0;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
min-width: 3em;
|
min-width: 3em;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Show all rows on hover if rows=1 */
|
/* Show all rows on hover if rows=1 */
|
||||||
|
|
||||||
:host([ readonly ][ multiple ][ rows ]) .hover__popup {
|
:host([ readonly ][ multiple ][ rows ]) .hover__popup {
|
||||||
width: -webkit-fill-available;
|
width: -webkit-fill-available;
|
||||||
width: -moz-fill-available;
|
width: -moz-fill-available;
|
||||||
width: fill-available;
|
width: fill-available;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([readonly][multiple][rows]) .hover__popup::part(popup) {
|
:host([readonly][multiple][rows]) .hover__popup::part(popup) {
|
||||||
z-index: var(--sl-z-index-dropdown);
|
z-index: var(--sl-z-index-dropdown);
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([ readonly ][ multiple ][ rows ]) .hover__popup .select__tags {
|
:host([ readonly ][ multiple ][ rows ]) .hover__popup .select__tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
::part(listbox) {
|
|
||||||
z-index: 1;
|
|
||||||
background: var(--sl-input-background-color);
|
|
||||||
padding: var(--sl-input-spacing-small);
|
|
||||||
padding-left: 2px;
|
|
||||||
|
|
||||||
box-shadow: var(--sl-shadow-large);
|
::part(listbox) {
|
||||||
min-width: fit-content;
|
z-index: 1;
|
||||||
border-radius: var(--sl-border-radius-small);
|
background: var(--sl-input-background-color);
|
||||||
border: 1px solid var(--sl-color-neutral-200);
|
padding: var(--sl-input-spacing-small);
|
||||||
overflow-y: auto;
|
padding-left: 2px;
|
||||||
}
|
|
||||||
|
|
||||||
::part(display-label) {
|
box-shadow: var(--sl-shadow-large);
|
||||||
margin: 0;
|
min-width: fit-content;
|
||||||
}
|
border-radius: var(--sl-border-radius-small);
|
||||||
|
border: 1px solid var(--sl-color-neutral-200);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
:host::part(display-label) {
|
::part(display-label) {
|
||||||
max-height: 8em;
|
margin: 0;
|
||||||
overflow-y: auto;
|
}
|
||||||
}
|
|
||||||
:host([readonly])::part(combobox) {
|
|
||||||
background: none;
|
|
||||||
opacity: 1;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Position & style of group titles */
|
:host::part(display-label) {
|
||||||
|
max-height: 8em;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
small {
|
:host([readonly])::part(combobox) {
|
||||||
padding: var(--sl-spacing-medium);
|
background: none;
|
||||||
}
|
opacity: 1;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Position & style of group titles */
|
||||||
|
|
||||||
|
small {
|
||||||
|
padding: var(--sl-spacing-medium);
|
||||||
|
}
|
||||||
`
|
`
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user