Vaadin-combo-box: السماح بتحديد عرض التراكب

لدينا المشكلة بالضبط الموصوفة ؛
لإدخال موقع ، يكون الرمز النموذجي هو "SVG" ، مع التسمية التوضيحية "Stavanger Airport Sola"
هذا تطبيق إنترانت ، لذلك يعرف مستخدمونا معظم الرموز عن ظهر قلب ، ويريدون كتابة "SVG" بدلاً من "Stavanger ..."
أيضًا ، لدينا العديد من هذه بجوار بعضها البعض في شبكة قابلة للتحرير. المساحة ضيقة ، لذلك نريد أن يتم ضبط حجم الأعمدة والمربعات القائمة على الكود وليس للتسمية التوضيحية.

اقترح فادين حلًا بديلًا يحل مشكلتنا الفورية:

<strong i="10">@CssImport</strong>
    ( id        = "vaadin-combo-box-overlay-override"
    , value     = "./styles/vaadin-combo-box-overlay.css"
    , themeFor  = "vaadin-combo-box-overlay"
    )

./styles/vaadin-combo-box-overlay.css:

:host {
     width: 500px !important;
}

أو ، إذا كنت تريده فقط في بعض المربعات المنسوجة:

:host([theme~="large"]) {
     width: 500px !important;
}

combobox.getElement().setAttribute("theme", "large");

نسخة مكررة من vaadin / vaadin-combo-box / قضايا / 529.

راجع تحسين العرض التوضيحي المقترح على https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment -374611447

لتحديث عرض تراكب ComboBox ديناميكيًا:

:host([theme="my-combo-box"]) {
  width: var(--my-combo-box-overlay-width, 200px) !important;
}

UI.getCurrent().getPage().executeJs("ShadyCSS.styleDocument({'--my-combo-box-overlay-width': $0 + 'px'})", newWidthAsInteger);

توجد الآن ميزة جديدة في مكون الويب لتسهيل ذلك (مشكلة مغلقة https://github.com/vaadin/vaadin-combo-box/issues/529 ، راجع العلاقات العامة المدمجة https://github.com/vaadin/ صندوق التحرير والسرد vaadin / سحب / 876)

يجب أن تدور هذه المشكلة الآن حول توفير طريقة مساعدة ، مثل setOverlayWidth(String cssLength) لتعيين خاصية CSS المخصصة الجديدة --vaadin-combo-box-overlay-width .

أستطيع أن أؤكد أن الكود التالي يعمل بشكل جيد كما اقترحه Haprog

comboBox.getElement().getStyle().set("--vaadin-combo-box-overlay-width", "400px")

يحتوي موقع المستندات الجديد على أمثلة لاستخدام الميزة المذكورة أعلاه:
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width