ionic2 - vertical scrolling inside of a slide

[susanlinsfu]

I have a couple of slides which have dynamic content that is added to them. The problem is the content inside of the slides doesn't scroll. So if I have a lot of items only some show and there is no ability to slide. How can I make it so the content in my lists slides inside of their slides?

<ion-content>
    <ion-slides (change)="onSlideChanged($event)">
        <ion-slide >
            <ion-list>
            <ion-item *ngFor="#item of items1; #i = index">
            <h2>{{item}</h2>
            </ion-item>
            </ion-list>
        </ion-slide>
         <ion-slide>
                 <ion-list>
            <ion-item *ngFor="#item of items2; #i = index">
            <h2>{{item}</h2>
            </ion-item>
            </ion-list>
        </ion-slide>
    </ion-slides>
</ion-content>

[jgw96]

@susanlinsfu Thanks for opening an issue with us! Would you mind making a plunker or codepen that we can use to reproduce your issue? Here is a template you can use to make your plunker: http://plnkr.co/edit/L8JN6w5mqwbMY2E14dbk?p=preview

[susanlinsfu]

Hi,

I have created a punker: http://plnkr.co/edit/G0LbU4SL9uVFgj6zCJYE?p=preview . Essentially there is a slide. This slide has a list with many items. This list is a large list so the user must be able to scroll down to view all of them, but scrolling is not possible.

I have tried to add style="overflow-y:scroll" to the slide and the scrolling is enabled,but if you look you will notice items are being cutoff so the entire list is not displayed.

Cheers

[susanlinsfu]

@brandyscarney Sorry to ask, but I was wondering if there has been any progress on this?

[brandyscarney]

Hey @susanlinsfu, unfortunately I haven't looked into fixing this in the framework yet, but you should be be able to override the height of the ion-slides element in order to fix it for your specific use case:

ion-slides {
  height: auto;
}

Let me know if this doesn't work!

[susanlinsfu]

@brandyscarney it does allow scrolling and all the elements fit, but the height becomes as big as the biggest slide for all the slides. This means if slide one has more elements than slide 2, then slide 2 once it scrolls to the last element it will be able to keep scrolling through blank white space.

[Elfwines]

Try .slide-zoom{ height:100%; }

[susanlinsfu]

@Elfwines Hi, I have tried it and it didn't do anything.

[Elfwines]

@susanlinsfu : Look here http://plnkr.co/edit/SjYtZYdBCIph5ipyyrn6?p=preview . I meant in addition to the overflow-y, sorry.

[susanlinsfu]

@Elfwines AHHHHHh my apologizes, yes this works exactly how I want it to work! Thanks so much for the punkr!

[reisenmachtfreude]

Fix worked for me to. Will this be part of the future releases? Or maybe it is already?

[samcdavid]

So none of this worked for me. I ended up having to wrap my content in ion-scroll tags and add the following to my sass so that the bottom would scroll above the pagination dots.

ion-scroll
  height: 100%
  .scroll:after
    content: " "
    display: block
    height: rem(100)

[NitrofMtl]

humm.. get the same bug here and those solution does not work. I'm a newbie in app and not have been able to create a working plunker... any other thing to try ?? https://plnkr.co/edit/9BMTxpdUUIB4NMZiUXin?p=preview

[NitrofMtl]

work around !!! I just add a <ion-content> tag and it is working fine.

<ion-view view-title="programs"> <ion-content padding="true" >
<ion-slides options="options" slider="data.slider"> <ion-slide-page ng-repeat="alarm in alarms"> <ion-content> <div class="list">`

[reneszabo]

Try

ion-slide{
      ion-list{
          height: 100vh;
          overflow-y: scroll;
      }
}

[briosheje]

I can confirm that adding a <ion-content scroll="true"> inside the will allow scrolling vertically the view.

The content, however, will overlap the page indicators of the slider: I'm not exactly sure how to solve it, but a possible approach is to use calc (css3) on the ion-content's height to reduce the height of the content, so that it will not overlap the indicators, but it will not work on every single device.

Alternatively, you may want to style the indicator to have a solid background color.

[khaledwj90]

I have a slider that slide "vertically". one of the page contains a list of cards which needs to be scrolled vertically also. can we do that is it there any fix for this issue

<ion-slides  options="{'loop': false,direction: 'vertical'}" slider="data.sliderDelegate" delegate-handle="slider1"  >
<ion-slide-page id="" style="background:transparent;" class="slider-content slider-padding-custome">
<p> first Page</p>
</ion-slide-page>
<ion-slide-page>
<ion-list id="home-list3">
      <ion-item class="item-divider" id="home-list-item-divider2"> Yesterday</ion-item>
      <div class="item item-body"  style="display: table; width: 100%; border-width: 0; border-bottom-color: #e3e3e3; border-bottom-width: 2px;">
        <div style="display: table-cell; vertical-align: middle; margin-right: 20px; height: 50px !important; width: 10%">
          <i class="icon ion-ios-shuffle" style="font-size: 30px;"></i>
        </div>
        <div style="display: table-cell; vertical-align: middle; margin-right: 20px; height: 50px !important;  padding-left: 10px">
          <p  style="font-weight:400; font-size: 15px; margin: 0; color: black;">PAYMENT SADAD</p>
          <p  style="font-weight:300; font-size: 15px; margin: 0; color: #A9A9A9;">Zain - Postpaid</p>
        </div>
        <div style="display: table-cell; vertical-align: middle;  margin-right: 20px; height: 50px !important; text-align: right;">
          <p  style="font-weight:400; font-size: 18px; margin: 0; color: #008578;">USD1,500.00</p>
        </div>
      </div>
</ion-slide-page>```

[jalbertos]

I have solved this with this simple css:

ion-slides { height: initial; }

[khaledwj90]

@jalbertos this is not working for me. non of items are showing in the page after this "CSS"

what i need to do is letting the user slide down then customer can scroll over transaction (Scroll down and up) and when he reach to the end he can slide again to the top.

Example: Snapchat when the user slide down he will see the list of images and he can scroll over them and when he scroll to the top and reach to end and keep scrolling the page will slide up again to the camera.

[kevendra]

focus from fifth input field onward does not scroll elements wrt added bottom padding

<ion-content>
    <ion-slides>
    <ion-slide>
        <ion-list>
      <ion-item>
        <ion-label floating>item1</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item2</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item3</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item4</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item5</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item6</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item7</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label floating>item8</ion-label>
        <ion-input type="text"></ion-input>
      </ion-item>      
    </ion-list>
    </ion-slide>
  </ion-slides>
</ion-content>

[prantikv]

As @brandyscarney said setting the height in CSS solves the issue for one slider. But when you move to the next slide which may be smaller than the first one there is empty space at bottom of the content as height is applied for the entire slider.

[pistou]

Here is my css temporary fix (it's very hacky and I hate it):

ion-slide {
    .slide-zoom {
        height: calc(100vh - 143px);
        overflow-y: auto;
    }
}

The 143px comes from the the addition of 60px for top header, 41px for bottom tabs, plus a 16px vertical padding on my ion-content

[guillermogfer]

That solution works perfectly until you want an at the bottom end, then it doesn't get triggered... Anyone with this same problem and a working solution?

[guillermogfer]

I ended up with

.html

<ion-slides>
<ion-slide>
  <ion-content>
    <ion-infinite-scroll (ionInfinite)="doInfiniteFetchProducts($event)" *ngIf="...">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-content>
</ion-slide>
<ion-slide>
  <ion-content>
    <...>
 </ion-content>
</ion-slide>
</ion-slides>

.scss

ion-slide {
.slide-zoom {
  height: 100%;
  ion-content {
    .scroll-content {
      margin-bottom: 0px !important;
    }
  }
}

}

[rhrahul]

ion-slide{
    overflow: auto;
}

.slide-zoom {
    text-align: center;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: auto;
    padding: 50px 10px;
}

[sameerj1985]

Nothing worked for me

[bulbul-ismail]

this worked for me on slides with different heights

.swiper-slide {
   display: block;
}

ion-slide{ 
  ion-list{
      height: 90vh; // padding for footer
      overflow-y: scroll;
  }
}

[prateekkembhavi]

.swiper-slide{ overflow-y: scroll; display: block; }

ion-slide{ height: auto; }

Worked for slides of variable lengths.

[vishavjeetnokhwal]

Now, ion-refresher is not working properly. It gets refreshed every time I scroll to down even if there are more items in the list.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/43