CODEWITHSUNDEEP
cssionic-frameworkionic4ion-slides
rtpHarry
rtpHarry

Reputation: 13125

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

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:

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:

even but fixed height

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?

Upvotes: 1

Views: 545

Answers (1)

Ali
Ali

Reputation: 1759

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

Upvotes: 0

Related Questions