Ionic - scroll within Ionic Slide not working

I dont see a vertical scroll bar to scroll through the contents in an ionic slider, below is the html snippet that shows what I am trying to do. Is there something wrong with the way I am rendering, please advise.

2 Likes

Try this

<ion-slides>
  <ion-slide>
   <ion-content></ion-content>
  </ion-slide>
</ion-slides>
4 Likes

Sorry, I see a blank screen when I have ion-content within ion-slide, any ideas?

Implement the scroll to container is easy job. You don’t must all time wait it from Ionic Team.

<div style="height:100px;width:100px;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>

Sorry for the delay. Hmm, looks like I was too quick to judge this one.

Try this.

Thank you for looking into this issue, but both the above solutions didnt work, if I put a ion-card with ion-slide, please refer to screen shot below, it shown the last section of page with no scrolling option, please increase the content with in ion-card. Thanks again for looking into.

You should be able to fix that with CSS, changing the overflow and display settings of the “swiper-slide” class, something like:

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

Thank you very much Simone that fixed my problem…

simonebizarra solution is the right one. :slight_smile:
If you end up having two scroll bars just do the following:
in your html file

<ion-content class="no-scroll">

in your scss file:
.no-scroll .scroll-content {
overflow: hidden;
}

1 Like

try this

page-welcome-slide {

  // scroll content
 .slide-zoom {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  // space for swiper-pagination
  .swiper-wrapper {
    height: 95%;
  }

}

1 Like

I have solved this issue with this simple css:

ion-slides { height: initial; }

6 Likes

Thank you, @Albertos, your solution was the one who worked the best for me!!

I’ve been struggling with this for 3 days!

Cheers!

2 Likes

Simone’s solution seems to work great!
@alexandretok and @Albertos
as i could see using the ion-slides { height: initial; } is a problem if you have different slide sizes

1 Like

but you can use auto

ion-slide {
    overflow-y: auto;
    display: block;
}
2 Likes

Want to let you all know that I solved it by setting the height of the scroll:

<ion-slides>
  <ion-slide>
   <h1>Top content here.</h1>
    <ion-scroll style="height: 200px"> 
      Scroll content here.
    </ion-scroll>
  </ion-slide>
</ion-slides>

Simple enough fix for what I was going for.

Thanks:)
I have solved this issue with
ion-slides { height: initial; }