Vaadin-combo-box: Autoriser la spécification de la largeur de superposition

Nous avons le problème exact décrit;
Pour une entrée d'emplacement, un code typique est "SVG", avec la légende "Stavanger Airport Sola"
Il s'agit d'une application intranet, nos utilisateurs connaissent donc la plupart des codes par cœur et souhaitent écrire "SVG" au lieu de "Stavanger..."
De plus, nous en avons plusieurs côte à côte dans une grille modifiable. L'espace est restreint, nous voulons donc que les colonnes et les listes déroulantes soient dimensionnées pour le code et non pour la légende.

Vaadin a suggéré une solution de contournement, qui résout notre problème immédiat :

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

Ou, si vous ne le voulez que sur certaines combobox :

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

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

Duplicata de vaadin/vaadin-combo-box/issues/529.

Voir l'amélioration de démonstration suggérée sur https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment-374611447

Pour mettre à jour dynamiquement la largeur de superposition de la 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);

Il y a maintenant une nouvelle fonctionnalité dans le composant Web pour rendre cela plus facile (problème fermé https://github.com/vaadin/vaadin-combo-box/issues/529, voir fusionné PR https://github.com/vaadin/ vaadin-combo-box/pull/876)

Ce problème devrait maintenant concerner la fourniture d'une méthode d'assistance, par exemple setOverlayWidth(String cssLength) pour définir ce nouveau prop personnalisé CSS --vaadin-combo-box-overlay-width .

Je peux confirmer que le code suivant fonctionne bien comme suggéré par @Haprog

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

Le nouveau site de documentation contient des exemples d'utilisation d'une fonctionnalité mentionnée ci-dessus :
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width