Slides with orientation change

Ionic Framework ionic-v3
1

i have slides with some text. However, when changing orientation, those text are not repositioned.
Is there a way to re-render the slides when orientation is changed? This was working fine with RC3, but with the latest release, this seems broken.

2

@mhartington any clue?

3

What platform are you testing on? There doesn’t seem to be an issue with 2.0.1?
Could you share some code too?

4 
<ion-slides #oneSlider *ngIf="getSettings().read === 'one'"
    direction="vertical"
    pager="true"
    paginationType="progress"
    zoom="true"
    [effect]="getSettings().effect"
    (ionSlideDidChange)="slideChange()"
    (click)="touchHelp()">
    <ion-slide *ngFor="let item of getItemList()" (swipe)="swipeEvent($event)" (press)="pressEvent($event)">
        <div class="home-content">
            {{ item }}
        </div>
    </ion-slide>
</ion-slides>

I have this in my home.ts
was working fine in RC3.

5

Also I have updated to 2.0.1 as well.

.home-content {
padding: 0px 50px;
}

i also have this.

6

@mhartington it looks like having direction="vertical" is breaking it.
I had it previously, but working fine. If i remove that attribute then it’s fine.

7

@mhartington is it possible to call mySwiper.onResize(); event which is supported in iSwiper library? calling ionSlide.update() doesn’t seem to work after detecting orientation change event.

8

Android, iOS, browser, tested all. None of them works with direction="vertical" option.

9

Mind opening an issue for this, seems like it’s not fixable at the moment

10

@mhartington yeah, i will do. So sad that i can’t do anything with this. For now, I’ll fix my app to allow portrait mode only… (cry).

1 Like
11

@ozexpert I found a workaround: if you add *ngIf to the ionic-slides element, set the boolean to false and then true in the onorientchange event callback it re-instantiates the slides element with the correct dimensions for the screen orientation.

2 Likes
12

Hi @anthonymoles,

I am facing the same issue in my app. Can you please explain more about the workaround?
Which attribute is to be handled?

Thanks.

13

If any one still having this issue I “solved” it like this:

TS:

ngOnInit() {
    this.platform.resize.subscribe( () => {
      this.handleSlideResize();
    });
  }

handleSlideResize() {
    this.hideSlides = true;
    setTimeout(() => {
      this.hideSlides = false;
    }, 10);
  }

HTML:

<ion-slides *ngIf="!hideSlides">

(Of course leave your options,reference… in the ion-slides)

Small timeout function. If you change the boolean too quick it wont work, you should at least have 1ms. I put 10 for testing.

Cheers!

1 Like