Ionic - scroll within Ionic Slide not working

Ionic Framework ionic-v3
1

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.

image
Pasted image1539Ă—405 70.5 KB

3 Likes
2

Try this

<ion-slides>
  <ion-slide>
   <ion-content></ion-content>
  </ion-slide>
</ion-slides>
7 Likes
3

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

2 Likes
4

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

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

Try this.

6

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.

image
Pasted image414Ă—744 26.7 KB

7

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;
}
23 Likes
8

Thank you very much Simone that fixed my problem…

9

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;
}

2 Likes
10

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
11

I have solved this issue with this simple css:

ion-slides { height: initial; }

9 Likes
12

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
13

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
14

but you can use auto

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

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.

17

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

18

I used:

<IonSlide>
 <IonPage>
  <IonContent>
   your content
  </IonContent>
 </IonPage>
</IonSlide>
19

For Android / iOS device is not working it crashes the slides you can’t do nothing.