Layout error with multiple slider in the same page


#1

Hi, I found an issue when i create two slider in the same page.

This is the code.

<!--
  Generated template for the Trymap page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>trymap</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-grid>
    <ion-slides>
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>
  </ion-grid>

  <ion-grid>
    <ion-slides>
      <ion-slide>
        <h1>Slide 1</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 2</h1>
      </ion-slide>
      <ion-slide>
        <h1>Slide 3</h1>
      </ion-slide>
    </ion-slides>
  </ion-grid>
</ion-content>

And this is the result when i rotate the device.

PORTRAIT MODE:

LANDSCAPE MODE:

Only the second slide resize the width instead the first slide no!

Any solution?


#2

Same issue here. Did you find any solution?


#3

what exactly do you want to do?


#4

As in the example, I have two slides. On portrait mode every is ok. Slides have 100% width. But on landscape mode the first slides are not resize to fill the whole width, and I see the second slide which is not activated. The second slides are ok, with 100% width.


#5

i posted the issue on github