Allow specifying overlay width

[OlliTietavainenVaadin]

It seems that the overlay element's width is fixed to be the same as the input field's. In some cases (short input, long item captions) it would be useful to allow customizing the overlay width to be larger. If this is doable with styles, such a method should be documented.

[guttormvik]

We have the exact issue described;
For a location input, a typical code is "SVG", with caption "Stavanger Airport Sola"
This is an intranet app, so our users know most of the codes by heart, and want to write "SVG" instead of "Stavanger..."
Also, we have several of these next to each other in an editable grid. Space is tight, so we want the columns and comboboxes to be sized for the code, and not for the caption.

Vaadin suggested a workaround, which solves our immediate problem:

@CssImport
	( 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;
}

Or, if you only want it on some comboboxes:

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

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

[web-padawan]

Duplicate of /issues/529.

See the suggested demo improvement at #529 (comment)

[tomivirkki]

To dynamically update the ComboBox overlay width:

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

[Haprog]

There is now a new feature in the web component to make this easier (closed issue #529, see merged PR #876)

This issue should now be about providing a helper method e.g. setOverlayWidth(String cssLength) for setting this new CSS custom prop --vaadin-combo-box-overlay-width.

[mvysny]

I can confirm that the following code works nicely as suggested by @Haprog

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

[web-padawan]

The new docs site has examples of using a feature mentioned above:
https://vaadin.com/docs-beta/latest/ds/components/combo-box/#popup-width

[mvysny]

Follow-up ticket: vaadin/flow-components#2331