Vaadin-combo-box: Izinkan menentukan lebar hamparan

Kami memiliki masalah persis yang dijelaskan;
Untuk input lokasi, kode tipikal adalah "SVG", dengan keterangan "Bandara Stavanger Sola"
Ini adalah aplikasi intranet, jadi pengguna kami hafal sebagian besar kode, dan ingin menulis "SVG" alih-alih "Stavanger..."
Juga, kami memiliki beberapa di samping satu sama lain dalam kisi yang dapat diedit. Ruang sempit, jadi kami ingin kolom dan kotak kombo berukuran untuk kode, dan bukan untuk keterangan.

Vaadin menyarankan solusi, yang memecahkan masalah langsung kami:

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

Atau, jika Anda hanya menginginkannya di beberapa kotak kombo:

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

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

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

Lihat peningkatan demo yang disarankan di https://github.com/vaadin/vaadin-combo-box/issues/529#issuecomment -374611447

Untuk memperbarui lebar hamparan ComboBox secara dinamis:

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

Sekarang ada fitur baru di komponen web untuk mempermudah ini (masalah tertutup https://github.com/vaadin/vaadin-combo-box/issues/529, lihat PR gabungan https://github.com/vaadin/ vaadin-combo-box/tarik/876)

Masalah ini sekarang harus tentang menyediakan metode pembantu misalnya setOverlayWidth(String cssLength) untuk menyetel prop kustom CSS baru ini --vaadin-combo-box-overlay-width .

Saya dapat mengonfirmasi bahwa kode berikut berfungsi dengan baik seperti yang disarankan oleh @Haprog

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

Situs dokumen baru memiliki contoh penggunaan fitur yang disebutkan di atas:
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup -width