CODEWITHSUNDEEP
angularionic-frameworkionic4
Tinyiko Chauke
Tinyiko Chauke

Reputation: 385

How to make each ion-slide to adopt it's height based on the data it holds?

I have used a *ngFor which loop throw an array and populate 7 slides with data. The problem that I'm facing is that if 1 slide has more data all other slides adopts the height of that slide, this makes other slides to have a large blank space between where it's data ends and the bottom of the slide. How do I fix this?

Below is my ion-slides code:

.html file

            <ion-item *ngFor="let b of default">
                <h2>
                <b>{{b.name}} {{b.surname}}</b> ({{b.No}})
                </h2>
            </ion-item>
         </ion-list>
        </div>
      </ion-slide>
    </ion-slides>

default is an object which populate the 7 slides.

the default is in the .ts file

Upvotes: 0

Views: 2171

Answers (1)

Cortney Thomas
Cortney Thomas

Reputation: 294

<ion-slides> is built using Swiper (see docs here) which allows for adding configuration options to the slides. In your case, you will want to add in autoHeight: true like so:

html

<ion-slides pager="true" [options]="slideConfig">
  <ion-slide>
    // slide content here
  </ion-slide>
</ion-slides>

ts

slideConfig = {
    effect: 'flip',
    slidesPerView: 1,
    centeredSlides: true,
    autoHeight: true
  };

Checkout the docs linked above for more options. Good luck!

Upvotes: 4

Related Questions