ion-slides vertical not working v4

[wallstudios]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When I set the slide direction to vertical the slider breaks and shows all content. only works if set to horizontal.

 @ViewChild('mySlider', { read: IonSlides }) 
  slides: IonSlides;  slideOptions = {direction: 'vertical'};

  <ion-slides [options]="slideOptions" #mySlider (ionSlidesDidLoad)="slidesDidLoad(mySlider)">

Expected behavior:

expect it to slide verticaly.

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.9.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.3, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/Wallstudios/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 5.0.4
   NodeJS            : v10.14.2 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
   Xcode             : Xcode 10.1 Build version 10B61

[jackfinn88]

Any news on this?

[fullstackdevsagar]

Same issue here

[digaus]

Same here... why is this not fixed already?

[monsieurPaon]

Same issue here !

[juanmiguelbesada]

I can't reproduce this issue in ionic 4.11.10 and @latest versions (dind't test on angular version)

https://codepen.io/juanmiguelbesada/pen/bGdezWq

[brandyscarney]

As a workaround for this issue, setting the height of the slides to 100% should work:

ion-slides {
  height: 100%;
}

Here's a Codepen for this: https://codepen.io/brandyscarney/pen/jOPyGPE

I can look into adding this by default, but can anyone verify whether or not this solves their problem?

[brandyscarney]

I've submitted a PR for this here: https://github.com/ionic-team/ionic/pull/20603

What this does is default the ion-slides height to 100%, but the height can still be overridden if desired, it just needs to be set to something in order to work properly.

There's a dev build here if anyone would like to test it:

# vanilla JS 
npm i @ionic/core@5.1.0-dev.202002241801.ce23bbc

# angular 
npm i @ionic/angular@5.1.0-dev.202002241801.ce23bbc

# react 
npm i @ionic/react@5.1.0-dev.202002241801.ce23bbc
npm i @ionic/react-router@5.1.0-dev.202002241801.ce23bbc

Please let me know if you see any issues with this, thanks!

[ionitron-bot[bot]]

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.