Slides with orientation change


#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).


#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.


#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.