Can't scroll inside the tab content

[losewin]

Im having a problem that when I list a dozen of list inside the tab content it wont slide down instead it slide left and right... my question is how do I scroll the content without changing the tab and also how do I scoll the content of the tab that wont affect other tabs ?

[Shinzah]

I've got the same issue, very annoying .... Cant scroll bottom, it always want to scroll left/right .... :(

[uzumakinaruto123]

The problem also occurs using tabslidebox plugin ! i think slides are the culprit ! both plugins use ion-slides which are too sensitive ! its a annoying experience when user tries to scroll vertically but the tabs are changed !

This is the only reason am not adding it in project ! It doesnt give android like feel !

This plugin would be much better if it tries to avoid changing tabs while user is scrolling.

[daltonpereira]

Hello,

I got the scroll content working by adding the directive

Now all the list items inside this scrolls smoothly. But the last item in the list is partially visible and the content stops scrolling. is there a fix for this?

[DipakMahapurkar]

Break line <br> after list end, But this is not standard code, but it work for me.

[ocean99988]

Facing the same issue too, anyone has any solutions?

[mjdiamond]

I know it's been a while, but if anyone needs it, here is the solution (i signed in just to post this):

In order to be able to scroll the content inside the tab, you have to wrap everything inside the \<ion-slide> into a \<ion-content>, so your html should look like this:

hi there! i'm scrollable, and you can put your here hi again! i'm also scrollable, put your here too

[anicache08]

anyone who has the solution for this also? i am using collection-repeat unfortunately the last item in the list is cut off like the image above... Thanks

[abhinituk]

Have you tried overflow-scroll = true ?

[wendellpalazzo]

Hey guys.. i had this problem too..... i'm using the solution provided by @mjdiamond

and a little increment on slidingTabs.scss file adding a class ".scroll-content" inside "ion-slide" (line 4) with this:

.scroll-content{ margin-bottom: $slidingTabsHeight; }

i hope this help anyone

[opiispanen]

I got it working by actually having two elements where the parent one is not scrollable and the one inside ion-slide-page is.

<ion-content class="has-tabs" scroll="false">
        <ion-slides slider="slider" ion-slides-tabs>
            <ion-slide-page 
                ng-repeat="category in categories track by $index"
                ion-slide-tab-label="{{ category.name }}">
                <ion-content class="has-tabs" scroll="true">
                        ...
                </ion-content>
             </ion-slide-page>
      </ion-slides>
</ion-content>