Tabs scrolling

Hi everyone,
is it possible to set the scroll step when clicking the scroll button to the right, for example to show the next 2 elements? In the attached file you can see, that it is not easy to get to the “Dashboards” element.
222.gif

It’s not configurable, the component will always scroll by it’s current width. Which is problematic because the scroll buttons overlay a large part of that. It would make more sense if the component would subtract the width of the scroll buttons from the scrolled amount, or use a percentage of the component width.

You could file an issue here: https://github.com/vaadin/web-components. Make sure to attach your GIF, as it demonstrates the issue very well.

I also need this fixed/updated :stuck_out_tongue: I just wanted to start a new thread but someone already did this. It is not a big problem on mobile where users can scroll horizontally on the touch screen but on desktop it is really annoying :slightly_smiling_face:

Do you have the SMALL variant applied?

There’s this issue that we were unable to reproduce as described: https://github.com/vaadin/flow-components/issues/4376

Also this https://github.com/vaadin/flow-components/issues/4744

Or do you have browser zoom set to something other than 100%?

I tried Tab and Tabsheets - always the same. My tabsheet has 15 tabs so I can see only Tabulator0 to Tabulator4 by default on this 600 px area but when I click right arrow, then the first tab is Tabulator6, Tabulator5 is missing here. Then Tabulator10 is not fully visible, so i click right arrow and I Tabulator10 is completely invisible, and only small part of Tabulator11 is displayed.
tabSheet.gif

TabSheet tabSheet = new TabSheet();
tabSheet.setWidth(“600px”);
for (int i = 0 ; i < 20; i++) {
tabSheet.add(“Tabulator” + i, new VerticalLayout());
}
tabSheet.addThemeVariants(TabSheetVariant.LUMO_TABS_MINIMAL);

If you go to the bug ticket linked to above, you’ll see that it has been closed, i.e. fixed, 2 weeks ago. Have you tried upgrading to the latest patch release 24.0.4?

indeed, didn’t spot that. Will try to upgrade to 24+! Thanks

Ok finally I have upgraded my Vaadin app to 24.0.4 but to be honest, I don’t see any changes regarding tabs/tab sheets. Still “Tabulator5” is not visible once I clicked right arrow button.
tabSheet_v24.gif

ah, I see, then it seems that there is an unrelated additional issue that wasn’t fixed by that fix

yes, now that I read your description again, it is different from what others have reported, and I can reproduce it.

It’s probably the same as this issue here: https://github.com/vaadin/flow-components/issues/4376

I’ve recategorized the issue and moved it to our backlog.

ok great thank you :slightly_smiling_face: