From 014753372b18f0cc76cc20fcde37fade1d492b70 Mon Sep 17 00:00:00 2001 From: nathan Date: Wed, 3 Jan 2024 09:06:17 -0700 Subject: [PATCH] Et2Email: Add max height + scrollbar to tag list use --height CSS var to override --- api/js/etemplate/Et2Email/Et2Email.styles.ts | 2 ++ api/js/etemplate/Et2Email/Et2Email.ts | 2 ++ 2 files changed, 4 insertions(+) diff --git a/api/js/etemplate/Et2Email/Et2Email.styles.ts b/api/js/etemplate/Et2Email/Et2Email.styles.ts index c0b250eba7..6b3692983e 100644 --- a/api/js/etemplate/Et2Email/Et2Email.styles.ts +++ b/api/js/etemplate/Et2Email/Et2Email.styles.ts @@ -27,6 +27,8 @@ export default css` border-radius: var(--sl-input-border-radius-medium); font-size: var(--sl-input-font-size-medium); min-height: var(--sl-input-height-medium); + max-height: calc(var(--height, 2.5) * var(--sl-input-height-medium)); + overflow-y: auto; padding-block: 0; padding-inline: var(--sl-input-spacing-medium); padding-top: 0.1rem; diff --git a/api/js/etemplate/Et2Email/Et2Email.ts b/api/js/etemplate/Et2Email/Et2Email.ts index 93fef3fc69..c79fd1fa1e 100644 --- a/api/js/etemplate/Et2Email/Et2Email.ts +++ b/api/js/etemplate/Et2Email/Et2Email.ts @@ -62,6 +62,8 @@ import Sortable from "sortablejs/modular/sortable.complete.esm.js"; * @csspart input - The input element * @csspart option - Each matching email address suggestion * @csspart tag - The individual tags that represent each email address. + * + * @cssproperty [--height=2.5] - The maximum height of the widget, to limit size when you have a lot of addresses. */ export class Et2Email extends Et2InputWidget(LitElement) implements SearchMixinInterface {