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.
What platform are you testing on? There doesn’t seem to be an issue with 2.0.1?
Could you share some code too?
<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.
Also I have updated to 2.0.1 as well.
.home-content {
padding: 0px 50px;
}
i also have this.
@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.
@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.
Android, iOS, browser, tested all. None of them works with direction="vertical"
option.
Mind opening an issue for this, seems like it’s not fixable at the moment
@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).
@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.
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.
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!