ion-slide equal height without explicit height on ion-slides?

Question

If I make a normal set of ion-slides the height of each slide is uneven:

//slideheight.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>slideheight</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides [options]="otherProjectsSliderConfig">
    <ion-slide class="slide1">
      <p>fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br></p>
    </ion-slide>

    <ion-slide class="slide2">
      <p>fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br>
        fdslkjds <br></p>
    </ion-slide>

    <ion-slide class="slide3">
      <p>
        fdslkjds <br>
        fdslkjds <br></p>
    </ion-slide>
  </ion-slides>
</ion-content>

// slideheight.page.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-slideheight',
  templateUrl: './slideheight.page.html',
  styleUrls: ['./slideheight.page.scss'],
})
export class SlideheightPage implements OnInit {

  otherProjectsSliderConfig = {
    slidesPerView: 1.2,
    spaceBetween: 5,
  };

  constructor() { }

  ngOnInit() {
  }

}

// slideheight.page.scss

.slide1{
    background: firebrick;
}

.slide2{
    background: yellowgreen;
}

.slide3 {
    background: plum;
}

Then I get uneven slides:

I have tried setting all sorts of properties but the only way I can find is to set a specific height to the ion-slides component:

ion-slides {
    height: 500px;
    // or
    // height: 100%;
    // height: 50%;
}

Which gives:

However, this is not a good way to set heights as its unable to take into account how much space the content is going to need. The screen could be small and push the content taller, or the data might require a long description.

There must be some way to set the flexbox to automatic height? What am I missing?

if you use percentages, the height will automatically adjust to your content if you chose to little. If you for example choose 100% your height will fill out your screen height if your content is even bigger than you will have a scroll view automatically within your slide. — benra, Jul 10 '19 at 07:30
Thanks for sharing that info, it's not something I knew. I'm still hoping there is some way to solve this but I'm beginning to think that it's going to require some JavaScript. — rtpHarry, Jul 10 '19 at 15:58

score 0 · Answer 1 · answered Mar 24 '21 at 14:01

This worked for me, I changed trh <ion-slides id="ionic-slides" pager="true" [options]="slideOpts"> ...

  ngAfterViewInit() {
    var container: HTMLElement = document.getElementById('ionic-slides');;
    container.style.height = '500px'
  }

or you can do it with CSS:

#ionic-slides{
  height: 500px;
}

when content inside ion-slide is big. you can keep scrolling

ion-slide equal height without explicit height on ion-slides?

1 Answers1