Ionic Slides resize problem

I have a slide next to an ion-split-pane next to an ion-slides but when the rotation of the device is changed (ie. screen resize) the ion-slide does not adjust to the new view.


My app.component.html as follows:

  <ion-split-pane contentId="main">
    <ion-menu side="start" contentId="main">

  <ion-router-outlet id="main" [swipeGesture]="false"></ion-router-outlet>

and my ion-slides component HTML as follows:

    <ion-title size="large" color="success">Loader</ion-title>

  <ion-slides pager="true">

I haven’t used slides in a while, but my understanding is that <ion-content> is intended solely to be a top-level element, never a child of <ion-slide>. Does anything change if you remove any <ion-content> elements that are not top-level children?

I tried as you said, now this happens - it starts off with one slide on the page, but then when rotated there’s a bit of the second slide then rotating again it doesn’t go back to how it started.

Screen Recording 2021-09-15 at 10.47.56 PM

edit: so I tried retaining ion-content but added fullscreen="true" and it acted similar to the above video just that the card is not centred. So I wonder if it really is the problem with ion-content?

No idea, but I would expect other styling problems to potentially plague you going forward as long as it’s being used unexpectedly. Ionic has a history of making assumptions in their component styling as to how things are deployed. For example, at one point there was a rash of threads here with people trying to wrap <ion-item> in a custom component and then putting their <app-thingy> inside <ion-list> instead of having the <ion-item> be a direct child of <ion-list>. Styling chaos ensued.

Ah! That makes sense. I have tried removing the ion-split-pane and it worked as intended, so I reckon the problem lies when both the split pane and the slider share the same viewport and styles clash. An annoying sacrifice but I am willing to take that if there aren’t any solutions! Thank you for your help :slight_smile: