Ionic Slides resize problem

Ionic Framework Ionic Angular
1

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.

Screen-Recording-2021-09-15-at-9.53.49-PM

My app.component.html as follows:

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

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

and my ion-slides component HTML as follows:

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

<ion-content>
  <ion-slides pager="true">
    <ion-slide>
      <ion-content>
        <app-bar-loader></app-bar-loader>
      </ion-content>
    </ion-slide>
    <ion-slide>
      <ion-content>
        <app-bar-loaded></app-bar-loaded>
      </ion-content>
    </ion-slide>
  </ion-slides>
</ion-content>
2

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?

3

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?

4

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.

5

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: