# Make ion-tabs items overflow scrollable

**URL:** <https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062>\
**Category:** ionic-v1\
**Created:** [July 20, 2016, 12:39pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062 "2016-07-20T12:39:30Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Saint\_Cyr](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@Saint\_Cyr](https://forum.ionicframework.com/u/Saint_Cyr)\
**Post date:** [July 20, 2016, 12:39pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/1 "2016-07-20T12:39:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![baviskarmitesh](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@baviskarmitesh](https://forum.ionicframework.com/u/baviskarmitesh)\
**Post date:** [July 20, 2016, 1:11pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/2 "2016-07-20T13:11:21Z")

</div>

use ion-scroll directive with scroll direction to be horizontal

---

<div class="post-metadata">

**Author:** ![Saint\_Cyr](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@Saint\_Cyr](https://forum.ionicframework.com/u/Saint_Cyr)\
**Post date:** [July 20, 2016, 1:18pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/3 "2016-07-20T13:18:55Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![baviskarmitesh](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@baviskarmitesh](https://forum.ionicframework.com/u/baviskarmitesh)\
**Post date:** [July 20, 2016, 1:21pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/4 "2016-07-20T13:21:13Z")

</div>

Yes set width of tab item as per your requirement

---

<div class="post-metadata">

**Author:** ![Saint\_Cyr](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@Saint\_Cyr](https://forum.ionicframework.com/u/Saint_Cyr)\
**Post date:** [July 20, 2016, 1:28pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/5 "2016-07-20T13:28:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![baviskarmitesh](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@baviskarmitesh](https://forum.ionicframework.com/u/baviskarmitesh)\
**Post date:** [July 20, 2016, 1:33pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/6 "2016-07-20T13:33:34Z")

</div>

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\>

---

<div class="post-metadata">

**Author:** ![Saint\_Cyr](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@Saint\_Cyr](https://forum.ionicframework.com/u/Saint_Cyr)\
**Post date:** [July 20, 2016, 1:42pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/7 "2016-07-20T13:42:46Z")

</div>

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 😭😞

---

<div class="post-metadata">

**Author:** ![Saint\_Cyr](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@Saint\_Cyr](https://forum.ionicframework.com/u/Saint_Cyr)\
**Post date:** [July 20, 2016, 2:04pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/8 "2016-07-20T14:04:56Z")

</div>

Looks what i get with my tabs.  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/c/b/cbd19cee599e7783bfe4036a55e43b5a493c3986.PNG)

---

<div class="post-metadata">

**Author:** ![baviskarmitesh](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@baviskarmitesh](https://forum.ionicframework.com/u/baviskarmitesh)\
**Post date:** [July 21, 2016, 6:26am UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/9 "2016-07-21T06:26:39Z")

</div>

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/](http://ionic-sarav.rhcloud.com/ionic/tabbedSlideBox/)

---

<div class="post-metadata">

**Author:** ![Saint\_Cyr](https://avatars.discourse-cdn.com/v4/letter/s/85f322/32.png) [@Saint\_Cyr](https://forum.ionicframework.com/u/Saint_Cyr)\
**Post date:** [July 22, 2016, 3:57pm UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/10 "2016-07-22T15:57:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![baviskarmitesh](https://avatars.discourse-cdn.com/v4/letter/b/df788c/32.png) [@baviskarmitesh](https://forum.ionicframework.com/u/baviskarmitesh)\
**Post date:** [July 26, 2016, 6:41am UTC](https://forum.ionicframework.com/t/make-ion-tabs-items-overflow-scrollable/58062/11 "2016-07-26T06:41:00Z")

</div>

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