Is it possible somehow to configure Vaadin 23 horizontal Tab component to work in multi-line mode (when there is no enough horizontal space) instead of scrolling? The issue - some users complain that scrolling doesn't work properly on some mobile devices.
Asked
Active
Viewed 105 times
1
-
Would be great to get a bug report about the non-working scrolling on some mobile devices, with more details about the actual devices, operating system, and browsers. And Vaadin version. – Jouni Nov 09 '22 at 18:45
-
I may demo it on the real app, but the biggest issue with this - that thanks to your solution - I already fixed that ) And it was working on some screens and not working on another screens. – alexanoid Nov 09 '22 at 20:12
1 Answers
3
The tabs part inside the <vaadin-tabs> component is flex container, and you can force that to wrap the contained tab elements.
vaadin-tabs::part(tabs) {
flex-wrap: wrap;
}
Note, that this CSS should be in a global style sheet (e.g. frontend/themes/mytheme/styles.css), and not in a component-specific style sheet (e.g. frontend/themes/mytheme/components/vaadin-tabs.css) which is copied inside the component's shadow DOM.
Jouni
- 2,830
- 15
- 12
-
Thank you! I added these styles. It works perfectly in FireFox but not in any of my other browsers .. not even Chrome. What might I have missed here? – alexanoid Nov 09 '22 at 19:55
-
@alexanoid How does it render? I had to add `vaadin-tabs { min-height: unset; }` (otherwise the wrapped tab overflowed vertically and wasn't visible) – Javier Nov 09 '22 at 20:05
-
Looks like I found the reason - the following notation works fine - `[part~='tabs'] { flex-wrap: wrap; }` – alexanoid Nov 09 '22 at 20:09
-
@Javier I just use the styles I posted in my previous comment. That's it. Now it is working in all browsers. – alexanoid Nov 09 '22 at 21:05
-
You should not need to unset the `min-height`. I updated the answer, to clarify where to put the CSS (I assume you placed it in a component-specific style sheet). – Jouni Nov 11 '22 at 20:48