CODEWITHSUNDEEP
ionic2
Adewale Oluyinka
Adewale Oluyinka

Reputation: 78

Ionic 2 Slide Not Scrolling and Centered Content

I have been trying to make ion-slide content scroll for several days now but it's not working. Also for some reason the content is centered which is not what I want, I want the content to start from the top.

Please see my code below:

<ion-slides pager="false" (change)="onSlideChanged($event)">
    <ion-slide style="background-color: green">
        <h2>lorem</h2>

        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor distinctio ducimus ipsam quae porro obcaecati, consequatur ullam velit aperiam fugiat hic delectus. Voluptatibus aliquid doloremque sunt nihil ipsum, voluptatum ex.</h1>

        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor distinctio ducimus ipsam quae porro obcaecati, consequatur ullam velit aperiam fugiat hic delectus. Voluptatibus aliquid doloremque sunt nihil ipsum, voluptatum ex.</h1>

        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor distinctio ducimus ipsam quae porro obcaecati, consequatur ullam velit aperiam fugiat hic delectus. Voluptatibus aliquid doloremque sunt nihil ipsum, voluptatum ex.</h1>
    </ion-slide>

    <ion-slide style="background-color: blue">
        <h2>Slide 2</h2>
    </ion-slide>

    <ion-slide style="background-color: red">
        <h2>Slide 3</h2>
    </ion-slide>
</ion-slides>

Here's the image of what it displays:

enter image description here

I appreciate any help. Thank you!

Upvotes: 0

Views: 3906

Answers (6)

Austyns
Austyns

Reputation: 760

Overwrite the ion-slides css property for height 

    ion-slides {
        height: auto !important;
    }

Upvotes: 0

Amr Ibrahim
Amr Ibrahim

Reputation: 2234

Add your content inside 

<ion-content></ion-content>

source: https://forum.ionicframework.com/t/ionic2-scroll-within-ionic-slide-not-working/47099/2?u=almgwary

Upvotes: 0

Dale Zak
Dale Zak

Reputation: 1135

Similar answer to https://stackoverflow.com/a/37690398/385730, 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>

Upvotes: 0

Adewale Oluyinka
Adewale Oluyinka

Reputation: 78

Found that I simply needed to use <ion-content>within each slide and everything worked fine.

Upvotes: 2

Jai Krishnan
Jai Krishnan

Reputation: 133

You can add this style to make the contents start from the top

ion-slide {
  align-items: flex-start !important;
}

Upvotes: 4

Michael Desigaud
Michael Desigaud

Reputation: 2135

May be some css are missing, check out this example:

https://github.com/driftyco/ionic-preview-app/blob/master/app/pages/slides/basic/styles.scss

Upvotes: 0

Related Questions