Vaadin-combo-box: Angeben der Überlagerungsbreite zulassen

Wir haben das genaue Problem beschrieben;
Ein typischer Code für eine Standorteingabe ist "SVG" mit der Überschrift "Stavanger Airport Sola".
Dies ist eine Intranet-App, daher kennen unsere Benutzer die meisten Codes auswendig und möchten "SVG" anstelle von "Stavanger..." schreiben.
Außerdem haben wir mehrere davon in einem bearbeitbaren Raster nebeneinander. Der Platz ist knapp, daher möchten wir, dass die Größe der Spalten und Kombinationsfelder für den Code und nicht für die Beschriftung angepasst wird.

Vaadin hat einen Workaround vorgeschlagen, der unser unmittelbares Problem löst:

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

Oder, wenn Sie es nur in einigen Kombinationsfeldern haben möchten:

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

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

Duplikat von vaadin/vaadin-combo-box/issues/529.

Siehe die vorgeschlagene Demo-Verbesserung unter https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment -374611447

So aktualisieren Sie die ComboBox-Overlay-Breite dynamisch:

: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);

Um dies zu erleichtern gibt es jetzt eine neue Funktion in der Webkomponente (geschlossene Ausgabe https://github.com/vaadin/vaadin-combo-box/issues/529, siehe zusammengeführte PR https://github.com/vaadin/ vaadin-combo-box/pull/876)

Bei diesem Problem sollte es nun darum gehen, eine Hilfsmethode bereitzustellen, zB setOverlayWidth(String cssLength) zum Setzen dieser neuen benutzerdefinierten CSS-Requisite --vaadin-combo-box-overlay-width .

Ich kann bestätigen, dass der folgende Code wie von @Haprog vorgeschlagen gut

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

Die neue Docs-Site enthält Beispiele für die Verwendung einer oben genannten Funktion:
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width