extern/egroupware
1
0
Fork 1
mirror of https://github.com/EGroupware/egroupware.git synced 2025-02-05 13:00:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Et2Select: Allow dropdown option list to be wider than the field

Browse Source
This commit is contained in:
nathan 2022-06-14 15:14:17 -06:00
parent 3f3e7559f1
commit 67b9102a69
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/Et2Select.ts
View File

@ -96,6 +96,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
{ {
super(); super();
this._triggerChange = this._triggerChange.bind(this); this._triggerChange = this._triggerChange.bind(this);
this._doResize = this._doResize.bind(this);
} }
connectedCallback() connectedCallback()
@ -106,6 +107,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
{ {
this.addEventListener("sl-clear", this._triggerChange) this.addEventListener("sl-clear", this._triggerChange)
this.addEventListener("sl-change", this._triggerChange); this.addEventListener("sl-change", this._triggerChange);
this.addEventListener("sl-after-show", this._doResize)
}); });
} }
@ -115,6 +117,7 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
this.removeEventListener("sl-clear", this._triggerChange) this.removeEventListener("sl-clear", this._triggerChange)
this.removeEventListener("sl-change", this._triggerChange); this.removeEventListener("sl-change", this._triggerChange);
this.removeEventListener("sl-after-show", this._doResize);
} }
firstUpdated(changedProperties?) firstUpdated(changedProperties?)
@ -136,6 +139,18 @@ export class Et2Select extends Et2WithSearchMixin(Et2InvokerMixin(Et2WidgetWithS
this.dispatchEvent(new Event("change")); this.dispatchEvent(new Event("change"));
} }
/**
* Change the menu sizing to allow the menu to be wider than the field width, but no smaller
*
* @param e
* @private
*/
private _doResize(e)
{
this.menu.style.minWidth = this.menu.style.width;
this.menu.style.width = "";
}
/** /**
* Get the node where we're putting the selection options * Get the node where we're putting the selection options
* *