Ion-slides mis-align when scrollbar shown/hidden


#1

When I give ion-slides auto height and some slides have scrollbars and others don’t, the slides become misaligned when the scrollbar is shown/hidden.

How can I make the slides full width regardless of whether or not a scrollbar is shown and have the slides aligned properly? I’ve tried calling resize() on the button click events but that had no visible effect, and I’ve tried setting each slide’s width to 100% but that made things even more mis-aligned. I’d like to stay away from using overflow-y: scroll as well.

What to look for in below code: First slide shows a scrollbar, second slide does not and is not full width, so the button bar is not aligned with the second slide’s div.

<ion-slides #slider style="height: auto">
  <ion-slide><div class="center first"></div></ion-slide>
  <ion-slide><div class="center second"></div></ion-slide>
</ion-slides>

<ion-row class="center">
  <button ion-button *ngIf="!slider.isBeginning()" (click)="slider.slidePrev()">Prev</button>
  <button ion-button *ngIf="!slider.isEnd()" (click)="slider.slideNext()" style="margin-left: auto">Next</button>
</ion-row>
@ViewChild('slider') slider: Slides;
ionViewDidLoad() {
  this.slider.autoHeight = true;
}
ion-slide {
  background-color: #f5be59;
  padding-top: 25px;
  .first {
    background-color: #7fc8e0;
    padding-top: 110vh; /* simulates lots of content to show scrollbar */
  }
  .second {
    background-color: #78db78;
    padding-top: 25px;
  }
}
.center {
  margin: 0 auto;
  width: 80%;
  max-width: 760px;
}
.button {
  margin: 0;
}

#2

I couldn’t think of a reusable, elegant way to solve this, so I ended up making classes for each slide and applying them based on the slider’s active index. You gotta do what you gotta do.

<ion-slides #slider
            [class.second-slide]="slider.getActiveIndex() == 1"
            [class.third-slide]="slider.getActiveIndex() == 2">
  <ion-slide><div class="center first"></div></ion-slide>
  <ion-slide><div class="center second"></div></ion-slide>
  <ion-slide><div class="center third"></div></ion-slide>
</ion-slides>
ion-slides {
  height: auto;
  &.second-slide .swiper-wrapper {
    transform: translate3d(-100%, 0, 0) !important;
  }
  &.third-slide .swiper-wrapper {
    transform: translate3d(-200%, 0, 0) !important;
  }
  .swiper-slide {
    width: 100% !important;
  }
}