Semantic-ui: [Tab] Feature request: scrollable tabs

[andreyvk]

Hi,

Problem: too many tabs on the screen will hide some of the tabs that fell out of the screen width. Currently it is not possible to access those tabs at all.

Possible Solutions

• Have arrows appear on the left or the right of the tab menu, once cumulative tabs width exceeds the screen width. Below is an example:

• Group least used "out-of-screen" tabs into a dropdown at the end of the tab menu. Here's a quick mockup:

• Both of the above configurable using tab settings

[ns-phennessy]

I suppose it depends on the usecase for your tabs; I believe that it was designed to be used in static menu situations; and I would argue that if you have too many tabs; you could refactor your UI to incorperate that differently.

That being said; I think this would be a good excuse to make a carousal module, which could be used on tabs as well but could also serve the traditional role of presentation

[jlukic]

I think if you have more than the available tab width, you should consider a separate UI pattern like a dropdown, or a site-specific code solution to resizing or allowing scrollable overflow.

Carousels are a bit far down on the roadmap.

[andreyvk]

@jlukic, there's nothing site-specific about not being able to see tabs. While in my project we deal with at least 1024px-wide screen resolutions, the problem will become very commonplace with mobile devices and everyone will have to implement boilerplate code for handling "hidden" tabs.

Please consider adding this as an enhancement somewhere down the line. Thanks

[dev-fullstacktechnology]

Hello, I have six tabs on my page. But when I switched on the tablet view have a width of 1024px, It will staring to overflowing. I previously posted my issue on ng2-semanti-ui, but since it is an issue of design I am looking for a solution. I used this.

<div class="ui six wide top attached tabular tabs menu">
</div>

[salazarm]

An easy solution that Semantic UI could support would be to simply allow you to pass a wrapper container for the tab menu div. That way I can just set the wrapper to overflow-x: scroll for my particular case. It would open up a lot of flexibility too.