Vaadin-combo-box: 오버레이 너비 지정 허용

정확한 문제가 설명되어 있습니다.
위치 입력의 경우 일반적인 코드는 "SVG"이고 캡션은 "Stavanger Airport Sola"입니다.
이것은 인트라넷 앱이므로 사용자는 대부분의 코드를 암기하고 "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);

이제 웹 구성 요소에 이 작업을 더 쉽게 하는 새로운 기능이 있습니다(종료된 문제 https://github.com/vaadin/vaadin-combo-box/issues/529, 병합된 PR https://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