Horizontal scrolling for Tab element

How do we enable horizontal scroll for the tab element? The ‘headers’ should scroll horizontally but the ‘content’ should remain responsive and follow the margin of the parent div.

In this screenshot, the tabs inside the red container should scroll while the content inside the blue container should maintain the margin from the screen

I think you sre going to have to make the ehole Tab element wide to support scrolling and then limit each of the tab contents to be 100% of the viewport

This is a workaround and we should fix the tab element

I gave the tab element a min-width of 800 px and set the overflow to scroll. However, it’s not scrolling.

Indeed, it’s not possible

I will add a note to fix this as soon as we come to revamping the Tab element

I know that it’s inconvenient, but the solution is to remake the tab element with conditional displays

Hi Luka - any movement here?

Screen Recording 2024-11-21 at 09.09.19

Will be possible with the new element, will update you this week on when the release is!

1 Like