Ионные слайды равной высоты без явной высоты на ионных слайдах? - PullRequest
Новая
       63

Ионные слайды равной высоты без явной высоты на ионных слайдах?

0 голосов
/ 09 июля 2019

Если я сделаю нормальный набор ion-slides, высота каждого слайда будет неравномерной:

// 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;
}

Тогда я получаю неровные слайды:

uneven slides

Я попытался установить всевозможные свойства, но единственный способ найти это - установить конкретную высоту для компонента ion-slides: 

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

Что дает:

even but fixed height

Однако это не очень хороший способ установки высоты, поскольку он не может учитывать, сколько места потребуется содержанию. Экран может быть маленьким и увеличивать содержимое, или для данных может потребоваться длинное описание.

Должен быть какой-нибудь способ установить flexbox на автоматическую высоту? Чего мне не хватает?

...