CODEWITHSUNDEEP
vaadinvaadin-flowvaadin24
alexanoid
alexanoid

Reputation: 25852

Vaadin Multi-Select Combo Box expand visible area

By default, the Multi-Select Combo Box hides elements that do not fit within its visible area (as shown in Figure #1).

Is there a way to configure/style the Multi-Select Combo Box component to automatically expand its visible area to display all selected items within it (as shown in Figure #2)?

enter image description here

UPDATED

I created 2 files and placed them there:

enter image description here

Insed of the styles.css I added the following:

@import url('./combobox/vaadin-multi-select-combo-box.css');
@import url('./combobox/vaadin-multi-select-combo-box-container.css');

and nothing changed

Upvotes: 0

Views: 306

Answers (2)

Curtis Snowden
Curtis Snowden

Reputation: 493

Reading through the GIT issue from Rolf, this was recently changed. You can now set the AutoExpand mode of MultiSelectComboBoxes.

MultiSelectComboBox<Country> mcbCountries = new MultiSelectComboBox<>();
mcbCountries.setAutoExpand(MultiSelectComboBox.AutoExpandMode.VERTICAL);

The default is NONE, and you can do VERTICAL (my favorite), HORIZONTAL, or BOTH. You can read more about it in the code notes for the method and enum. Testing in my own application, VERTICAL will do exactly what you have in Figure #2 with no other changes or CSS tweaks.

This was introduced in 24.3.x - https://vaadin.com/docs/latest/components/multi-select-combo-box#auto-expand

Upvotes: 1

Rolf
Rolf

Reputation: 2418

Not at the moment. There is a feature request ticket that you can 👍 at https://github.com/vaadin/web-components/issues/4625, and there's a comment in there with some CSS-based hacks to achieve it today.

Upvotes: 2

Related Questions