Scrollable tabs on overflow

[jumpinjackie]

When a large set of tabs that displays fine on desktop/tablet resolution gets compressed down to a smartphone resolution, they flow over onto the space below producing an ugly set of stacked tabs.

What would be really nice is on such constrained displays, that the tab list becomes horizontally scrollable or vertically scrollable if the tab list is vertically oriented

Some screenshots to better explain

What currently happens

What we'd like to happen

[mdo]

We won't be adding that at this time. I'd consider a different approach than tabs for narrow views.

[ProLoser]

What if you just have an optional class to make the tab bar fixed height and overflow:auto so that the tabs don't wrap. Then slap something like this in there: http://lea.verou.me/2012/04/background-attachment-local/ so that people can see that it's in fact possible to scroll through the tabs (or drag through them on touch devices). The arrows to scroll would of course be an additional feature.

I realize the flaw with this would be that it breaks dropdowns... still got no solution for that.

[aolee]

@jumpinjackie did you manage to solve this issue? i need the same thing for my project.

[swapna5]

Is there any solution for this scrollable tabs?

[jumpinjackie]

@aolee Our workaround in our app was to use a TinyNav (http://tinynav.viljamis.com/) in place of the tabs when the screen gets small enough.

Still it's a hack.

Still I am disappointed that such an idea that would have merit when we're trying for a one-size-fits-all responsive design would be shot down like this.

Other options you may consider:

• Bootstrap responsive tabs: http://openam.github.io/bootstrap-responsive-tabs/
• Bootstrap tabdrop plugin: http://www.eyecon.ro/bootstrap-tabdrop/

[seiyria]

For those looking this way, Polymer has support for this out of the box (thankfully).

[marcelkohl]

Maybe this can help: http://www.bootply.com/l2ChB4vYmC

[twbs-lmvtfy]

Hi @marcelkohl!

You appear to have posted a live example (http://s.bootply.com/render/l2ChB4vYmC), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 10, column 9: W013: Bootstrap version might be outdated. Latest version is at least 3.3.5 ; saw what appears to be usage of Bootstrap 3.1.1
• line 118, column 9: W013: Bootstrap version might be outdated. Latest version is at least 3.3.5 ; saw what appears to be usage of Bootstrap 3.1.1

You'll need to fix these errors and post a revised example before we can proceed further. Thanks!

(Please note that this is a fully automated comment.)