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
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.
Most helpful comment
Full fix:
Use:
<ion-slide class="scroll-content">instead of<ion-slide>Add CSS: