Vaadin-combo-box: Permitir a especificação da largura da sobreposição

Temos o problema exato descrito;
Para uma entrada de local, um código típico é "SVG", com a legenda "Stavanger Airport Sola"
Este é um aplicativo de intranet, então nossos usuários sabem a maioria dos códigos de cor e desejam escrever "SVG" em vez de "Stavanger ..."
Além disso, temos vários deles próximos um do outro em uma grade editável. O espaço é apertado, então queremos que as colunas e caixas de combinação sejam dimensionadas para o código, e não para a legenda.

Vaadin sugeriu uma solução alternativa, que resolve nosso problema imediato:

<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, se você quiser apenas em algumas caixas de combinação:

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

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

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

Veja a melhoria de demonstração sugerida em https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment -374611447

Para atualizar dinamicamente a largura da sobreposição do 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);

Agora há um novo recurso no componente da web para tornar isso mais fácil (problema encerrado https://github.com/vaadin/vaadin-combo-box/issues/529, consulte PR mesclado https://github.com/vaadin/ vaadin-combo-box / pull / 876)

Este problema agora deve ser sobre como fornecer um método auxiliar, por exemplo, setOverlayWidth(String cssLength) para definir esta nova proposta CSS customizada --vaadin-combo-box-overlay-width .

Posso confirmar que o código a seguir funciona bem, conforme sugerido por @Haprog

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

O novo site de documentos tem exemplos de uso de um recurso mencionado acima:
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width