extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-06-25 20:31:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Select / Search CSS:

Browse Source 
- Limit height of tag area (3 lines), use scrollbar if we get too many
This commit is contained in:
nathan 2022-06-14 09:37:21 -06:00
parent 003f1255d7
commit 5f77d0c644
1 changed files with 15 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
api/js/etemplate/Et2Select/SearchMixin.ts
View File

@ -205,6 +205,11 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
.tag_image { .tag_image {
margin-right: var(--sl-spacing-x-small); margin-right: var(--sl-spacing-x-small);
} }
/* Maximum height + scrollbar on tags */
.select__tags {
max-height: 5em;
overflow-y: auto;
}
/* Keep overflow tag right-aligned. It's the only sl-tag. */ /* Keep overflow tag right-aligned. It's the only sl-tag. */
.select__tags sl-tag { .select__tags sl-tag {
margin-left: auto; margin-left: auto;
@ -496,6 +501,15 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
if(this.multiple && this.searchEnabled) if(this.multiple && this.searchEnabled)
{ {
this._searchInputNode.focus(); this._searchInputNode.focus();
// Scroll the new tag into view
if(event.detail && event.detail.item)
{
this.updateComplete.then(() =>
{
this.shadowRoot.querySelector("et2-tag[value='" + event.detail.item.value + "']").scrollIntoView();
});
}
} }
} }
@ -864,6 +878,7 @@ export const Et2WithSearchMixin = <T extends Constructor<LitElement>>(superclass
return html` return html`
<et2-tag class="search_tag" <et2-tag class="search_tag"
removable removable
value="${item.value}"
@dblclick=${this._handleDoubleClick} @dblclick=${this._handleDoubleClick}
@click=${this.handleTagInteraction} @click=${this.handleTagInteraction}
@keydown=${this.handleTagInteraction} @keydown=${this.handleTagInteraction}