Vaadin-combo-box: ओवरले चौड़ाई निर्दिष्ट करने की अनुमति दें

हमारे पास वर्णित सटीक समस्या है;
स्थान इनपुट के लिए, एक विशिष्ट कोड "एसवीजी" है, जिसका शीर्षक "स्टवान्गर एयरपोर्ट सोला" है।
यह एक इंट्रानेट ऐप है, इसलिए हमारे उपयोगकर्ता अधिकांश कोड को दिल से जानते हैं, और "स्टवान्गर ..." के बजाय "एसवीजी" लिखना चाहते हैं।
इसके अलावा, हमारे पास इनमें से कई एक संपादन योग्य ग्रिड में एक दूसरे के बगल में हैं। स्थान तंग है, इसलिए हम चाहते हैं कि कॉलम और कॉम्बोक्स को कोड के लिए आकार दिया जाए, न कि कैप्शन के लिए।

वाडिन ने एक समाधान सुझाया, जो हमारी तत्काल समस्या का समाधान करता है:

<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;
}

या, यदि आप इसे केवल कुछ comboboxes पर चाहते हैं:

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

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

vaadin/vaadin-combo-box/issues/529 का डुप्लिकेट।

सुझाए गए डेमो सुधार को https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment -374611447 पर

कॉम्बोबॉक्स ओवरले चौड़ाई को गतिशील रूप से अपडेट करने के लिए:

: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/ वाडिन-कॉम्बो-बॉक्स/पुल/876)

यह मुद्दा अब एक सहायक विधि प्रदान करने के बारे में होना चाहिए जैसे setOverlayWidth(String cssLength) इस नए सीएसएस कस्टम प्रोप --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