<ion-slides> with different heights

[HugoHeneault]

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ x ] 3.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: A slider with different heights of slides will have its smaller slides filled with blank spaces at the bottom

Expected behavior: Each slide should be at its exact height, not the height of the tallest one.

Steps to reproduce: Create a slider with some slides of different height.

Related code: A solution has been found on a previous issue, closed for missing template: https://github.com/ionic-team/ionic/issues/10690

<!-- index.html -->
<ion-slides [ngStyle]="{ 'height': slidesMoving ? 'auto' : (slidesHeight + 'px') }"
            (ionSlideDidChange)="slideDidChange()"
            (ionSlideWillChange)="slideWillChange()">
...
</ion-slides>

// index.ts
slideDidChange () {
  this.slidesMoving = false;
  let slideIndex : number = this.slides.getActiveIndex();
  let currentSlide : Element = this.slides._slides[slideIndex];
  this.slidesHeight = currentSlide.clientHeight;
}
slideWillChange () {
  this.slidesMoving = true;
}

[jgw96]

Thanks for opening an issue with us, we will look into this.

[amadercode]

Give solution at [#10690](https://github.com/ionic-team/ionic/issues/10690) Working for Me.

There were a very silly bug for last slide showing as

Runtime Error Cannot read property 'clientHeight' of undefined

And ERROR Log as

TypeError: Cannot read property 'clientHeight' of undefined at HomePage.webpackJsonp.193.HomePage.slideDidChange (http://localhost:8100/build/main.js:147:41) at Object.eval [as handleEvent] (ng:///AppModule/HomePage.ngfactory.js:270:24) at handleEvent (http://localhost:8100/build/vendor.js:12273:138) at callWithDebugContext (http://localhost:8100/build/vendor.js:13565:42) at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:13153:12) at dispatchEvent (http://localhost:8100/build/vendor.js:9173:21) at http://localhost:8100/build/vendor.js:11101:20 at SafeSubscriber.schedulerFn [as _next] (http://localhost:8100/build/vendor.js:4222:36) at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/vendor.js:30755:16) at SafeSubscriber.next (http://localhost:8100/build/vendor.js:30702:22)

To solve this problem , i have give a very simple condition for last slide as

slideDidChange () {
        this.slidesMoving = false;
        let slideIndex : number = this.slides.getActiveIndex();
        let currentSlide : Element = this.slides._slides[slideIndex];
        //To avoid last slide unexpected error 

        let slideNumerbers=this.slides.length();
        if(slideIndex<slideNumerbers){
        this.slidesHeight = currentSlide.clientHeight;
        }
    }

Hope it will be helpful to them like me.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. 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.

Thank you for using Ionic!