Vaadin-combo-box: Permitir especificar el ancho de la superposición

Tenemos el problema exacto descrito;
Para una entrada de ubicación, un código típico es "SVG", con la leyenda "Stavanger Airport Sola".
Esta es una aplicación de intranet, por lo que nuestros usuarios se conocen la mayoría de los códigos de memoria y quieren escribir "SVG" en lugar de "Stavanger ..."
Además, tenemos varios de estos uno al lado del otro en una cuadrícula editable. El espacio es reducido, por lo que queremos que las columnas y los cuadros combinados tengan el tamaño correspondiente al código y no al título.

Vaadin sugirió una solución alternativa, que resuelve nuestro problema inmediato:

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

O, si solo lo desea en algunos cuadros combinados:

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

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

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

Vea la mejora de demostración sugerida en https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment -374611447

Para actualizar dinámicamente el ancho de superposición de 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);

Ahora hay una nueva característica en el componente web para hacer esto más fácil (problema cerrado https://github.com/vaadin/vaadin-combo-box/issues/529, ver PR combinado https://github.com/vaadin/ vaadin-combo-box / pull / 876)

Este problema ahora debería consistir en proporcionar un método auxiliar, por ejemplo, setOverlayWidth(String cssLength) para configurar este nuevo accesorio personalizado de CSS --vaadin-combo-box-overlay-width .

Puedo confirmar que el siguiente código funciona bien como lo sugiere @Haprog

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

El nuevo sitio de documentos tiene ejemplos del uso de una función mencionada anteriormente:
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width