Make ion-tabs items overflow scrollable

Hello! Please, i have more than 10 items in my ion-tabs. Actually there are ended by “…” on small screen (ie: “Presentation” becomes “present…”). So i want to know if it is possible to make this items scrollable horizontally and how do it. Thank you for your help.

1 Like

use ion-scroll directive with scroll direction to be horizontal

1 Like

Thanks for your answer @baviskarmitesh.
Did i use it as ion tabs parent? Like this:
<ion-scroll direction="x"> <ion-tabs> //Items goes here </ion-tabs> </ion-scroll>

Is it right?

Yes set width of tab item as per your requirement

Sorry, but it don’t works and the links becomes disabled. Can you bring me an example please? Thanks a lot

This is absolutely working for me
< ion-scroll direction=“x” >
< a href=“javascript:;” class=“ion-ios-game-controller-b1” ng-click=“f1()”>Link 1< /a>
< a href=“javascript:;” class=“ion-ios-game-controller-b1” ng-click=“f2()”>Link 2< /a>
< a href=“javascript:;” class=“ion-ios-game-controller-b1” ng-click=“f3()”>Link 3< /a>
< a href=“javascript:;” class=“ion-ios-game-controller-b1” ng-click=“f4()”>Link 4< /a>
< a href=“javascript:;” class=“ion-ios-game-controller-b1” ng-click=“f5()”>Link 5< /a>
< a href=“javascript:;” class=“ion-ios-game-controller-b1” ng-click=“f6()”>Link 6< /a>
< /ion-scroll>

Yes your code working for me too. But you don’t use tabs and with tabs it don’t works. This will make me crazy. Lol :sob::disappointed:

Looks what i get with my tabs.
image

I have used this code with tabs only. Just try to use tabsliderbox with the above code you will get the expected result. follow bellow link for example

http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/

2 Likes

Okay Thanks, i already had seen this. It make both the nav tabs items and content scrollable. But what i want is to make only items scrollable. So if we have 15 items for example, users can scroll horizontally and choose what items they want content be seen.

combine the two TabbedSlideBox and all anchor tags should be enclosed within the ion-scorll directive as described in previous post. This should work I am using it. In case of difficulty please codepen your code will solve there