Ionic-framework: Slides not scroll-able when height is big

Created on 1 Jan 2017  路  4Comments  路  Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
[ ] 1.x
[X] 2.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When having slides, that are bigger than the screen, they are not up-and-down scrollable.
Also, (and I think that is why the bug happens), the slides are aligned center to height. I couldn't find a way to un-center them (is there one?) so I could not see if that is the cause for sure.

Expected behavior:
Big slides should be scrollable

Steps to reproduce:
Take the slides example - and make more text
http://plnkr.co/edit/kA32RLKa6Gjwhq4upzFF?p=preview

Ionic info:

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.1
Xcode version: Not installed

Most helpful comment

Full fix:
Use: <ion-slide class="scroll-content"> instead of <ion-slide>
Add CSS:

.swiper-slide {
    display: block !important;
}

All 4 comments

Full fix:
Use: <ion-slide class="scroll-content"> instead of <ion-slide>
Add CSS:

.swiper-slide {
    display: block !important;
}

I just added the following app wide css to handle this issue.

.swiper-slide {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

If you don't want the slides and text to be centered, use this:

.swiper-slide, .slide-zoom {
  text-align: left;
}
.swiper-slide {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  align-items: stretch;
}

If you need to to scroll within your slide, use ion-scroll

<ion-content padding>
  <ion-slides>
    <ion-slide>
      <ion-scroll style="position:absolute; top: 0; bottom: 0; width:100%;" scrollY="true"></ion-scroll>
    </ion-slide>
  </ion-slides>

</ion-content>

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Macstyg picture Macstyg  路  3Comments

manucorporat picture manucorporat  路  3Comments

SebastianGiro picture SebastianGiro  路  3Comments

danbucholtz picture danbucholtz  路  3Comments

Nick-The-Uncharted picture Nick-The-Uncharted  路  3Comments