CODEWITHSUNDEEP
ionic-frameworkangularionic2
user2924127
user2924127

Reputation: 6252

ionic2 : content in slides not scrolling

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>

Upvotes: 3

Views: 5516

Answers (4)

Ronald Ara&#250;jo
Ronald Ara&#250;jo

Reputation: 1479

In controller, put:

ngAfterViewInit() {
  this.slides.autoHeight = true;
}

Upvotes: 0

Cedric Ipkiss
Cedric Ipkiss

Reputation: 6347

Setting style='height:auto' as stated in booyoungxu's answer disables sliding after you swipe on the first slide. style='overflow:scroll' works best.

<ion-slides style="height: auto">
...
</ion-slides>

Upvotes: 0

booyoungxu
booyoungxu

Reputation: 143

I have the same problem,and I solve it like this:

    <ion-slides style="height: auto">
       <ion-slide *ngFor="#item of items">
           <h1>{{item.title}}</h1>
           <p>{{item.description}}</p>
       </ion-slide>
    </ion-slides>

Upvotes: 13

Dale Zak
Dale Zak

Reputation: 1135

Looks like you need to wrap your long content in a <scroll-content> inside of each <ion-slide>, for example:

<ion-slides>
    <ion-slide *ngFor="#item of items">
      <scroll-content>
        <h1>{{item.title}}</h1>
        <p>{{item.description}}</p>
      </scroll-content>
    </ion-slide>
</ion-slides>

Note, you may need to do a text-align:left if you want the text to not be centered, since thats the default for content in <ion-slide>.

Upvotes: 0

Related Questions