Tabs Scrolling X - Hidden tabs

I’m using a tabs layout and have enough tabs for some views that take up more than the screen can allow.

I’ve tried implementing some CSS solutions like overflow scroll x, but when I do it the tabs on the left side won’t come into the view. It’s like the calculated width is off.

I think this happens because of how the tabs load in the DOM and I’m dynamically adding tabs after the viewport is calculated.

Anyone have a solution for getting the scroll x to work?

Luckily, only admins have the need to scroll so this isn’t a UX deal for regular users.

Thanks for any help!!

Take a look at all the tabs and then a view showing the scroller not recognizing the hidden ones.


After days of trying things, I found the issue. (Of course I find it an hour after starting this thread. Seems that’s a dev’s life.)

.tabbar has a property of “justify-content: center” and that’s throwing everything off. You’ll also need “overflow: scroll” on the .tabbar.

If you make the property “justify-content: left !important” then it forces the hidden content back into the viewport and you’re able to scroll the whole way!

1 Like