Vaadin-combo-box: オーバーレイ幅の指定を許可

正確な問題が説明されています。
場所の入力の場合、一般的なコードは「SVG」で、キャプションは「StavangerAirportSola」です。
これはイントラネットアプリなので、ユーザーはほとんどのコードを心から知っており、「Stavanger ...」ではなく「SVG」と書きたいと考えています。
また、これらのいくつかは編集可能なグリッドに隣り合っています。 スペースが狭いため、列とコンボボックスのサイズをキャプションではなくコードに合わせて設定する必要があります。

Vaadinは、当面の問題を解決する回避策を提案しました。

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

または、一部のコンボボックスでのみ必要な場合：

: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で提案されたデモの改善を参照して

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

これを簡単にするための新機能がWebコンポーネントに追加されました（クローズされた問題https://github.com/vaadin/vaadin-combo-box/issues/529、マージされたPRhttps：//github.com/vaadin/を参照） vaadin-combo-box / pull / 876）

この問題は、この新しいCSSカスタムプロップ--vaadin-combo-box-overlay-widthを設定するためのヘルパーメソッド（例： setOverlayWidth(String cssLength)を提供することに関するものです。

@Haprogによって提案されたように、次のコードがうまく機能することを確認できます

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

新しいドキュメントサイトには、上記の機能の使用例があります。
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width