0

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

alexanoid
  • 24,051
  • 54
  • 210
  • 410

1 Answers1

1

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.

Rolf
  • 2,178
  • 4
  • 18
  • 29
  • Thank you! Should this work for Vaadin 24.2.0 ? I added 2 files: `vaadin-multi-select-combo-box.css vaadin-multi-select-combo-box-container.css` to themes\THEME_NAME\components folder but nothing happens.. – alexanoid Aug 21 '23 at 08:51
  • 1
    Yeah that's the wrong way: the CSS provided in that issue is GLOBAL css, not Shadow DOM CSS, so it needs to be in a normal stylesheet, e.g. styles.css. You can rewrite it to work in shadow CSS, but global CSS is the recommended approach in V24, for which we provide selector documentation, etc. – Rolf Aug 21 '23 at 12:10
  • I apologize, it looks like I'm still doing something wrong. Could you please take a look at my updated question? I implemented the mentioned steps there, but still without any result. What am I doing wrong? I use styles from the following comment: https://github.com/vaadin/web-components/issues/4625#issuecomment-1542230857 – alexanoid Aug 21 '23 at 14:16
  • Ah well THAT version actually DOES use shadow DOM CSS – didn't notice that because I just checked the examples provided in earlier comments. Rule of thumb: whenever you see ::part() it's global CSS, and whenever you see :host it's shadow DOM CSS. So you do need to put those in the components folder. Which Vaadin version are you using btw? – Rolf Aug 22 '23 at 09:36
  • If it's V24, you might need to disable the pre-compiled frontend bundle for shadow DOM stylesheets to be applied: https://vaadin.com/docs/latest/configuration/development-mode#disable-precompiled-bundle – Rolf Aug 22 '23 at 09:38