How to make horizontal scrollable tab-nav ? i have got more then 5 ion-tab

ionic-v1
1

Hello ,

i am ussing tab-nav which contains more then 5 ion tab, can any one help me to make horzontal scrollable tab-nav . so that i can use more ion tab in tab-nav

4 Likes
2

i was waiting for reply for the same issue. can anybody help me to solve above mentioned issue or can give proper guidance.

thank you

3

I have the same issue, I hope someone can help me!

thank you in advice

4

Did you guys manage to do this? Iā€™m facing the same problem in the next few weeks. Having several tabs on the same view and not enough space to view all the names.

5

hi Rakesh, have you find something on this. i am having same problem. i have 10 ion-tabs it looking dirty all in one line. i want scroll in tabs. :disappointed:

6

Try adding .tab-nav tabs{width: 500px; overflow-x: scroll} to your css. The width would vary based on the size of your tabs. And you should test it out with different devices as well.

Btw, if you want to do lot of tabs, why not do something custom and scrollable? https://jsfiddle.net/jccrosby/eRGT8/

7

In head section

Tab 1
Tab 2
Tab3
Tab 1
Tab 2
Tab3
Tab 1
Tab 2
Tab3

in Container Section

1 2 3 4 5 6 7 8