Layout error with multiple slider in the same page

[filippodicostanzo]

Ionic version: (check one with "x") [ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [X ] 3.x

I'm submitting a ... (check one with "x") [ X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Layout error with multiple slider in the same page

Expected behavior: I found an issue when i create two slider in the same page. When i start the device in portrait mode the layout of two slides is ok while if i rotate the device in landscape mode the first slider doesn't fit properly.

Related code:

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

Other information: PORTRAIT MODE IMAGE: https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/a/a/aad8dd7be24b3ed864782fdc079d0225ec4cd8db.png

LANDSCAPE MODE IMAGE: https://cdn-enterprise.discourse.org/ionicframework/uploads/default/original/3X/1/5/1538df5c7f819aa492e9e2569b26de41de401d52.png

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 3.4.2
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
ios-deploy version: Not installed
ios-sim version: Not Installed
OS: Windows 10
Node Version: v6.8.0
Xcode version: Not Installed

[jgw96]

Thanks for using Ionic, we will look into this.

[miguelmchavez]

I´m using the V3 too and have a problem with the Slides. Whenever i try to include a Slides inside another Slides the child fail if i change the effect, for example i want the flip effect in the inner Slides. If i add this effect the input and button inside the inner slides fails.

The only wait all the slides work is not setting any effect.

[miguelmchavez]

Any news about this? @jgw96

[filippodicostanzo]

@jgw96 any news?

[mg1075]

Probably the same problem I'm experiencing. Multiple sliders on a page. Viewing in chrome using iPad emulator. The slides in the first slider have about half the width they should have. The slides in the other sliders do have the correct width, though.

[mg1075]

This is hardly a "solution", but it has addressed the immediate problem I was facing: by adding another slider element as first slider prior to the real <ion-slides> elements, the first real slider displayed with normal width.

Again, the fake slider was the first in order among all the other sliders in the HTML. Then I added an inline style to the fake slider, giving it a height of 0. style="height: 0"

[manojbhardwaj]

ion-slide.swiper-slide.swiper-slide-active { width: 100% !important; }

[filippodicostanzo]

@manojbhardwaj thanks for your solution.

GREAT

[manojbhardwaj]

Thank you sir

On Mon, Jan 22, 2018 at 10:48 AM, filippodicostanzo < notifications@github.com> wrote:

@manojbhardwaj https://github.com/manojbhardwaj thanks for your solution.

GREAT

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ionic-team/ionic/issues/12104#issuecomment-359464999, or mute the thread https://github.com/notifications/unsubscribe-auth/AL3SNFkorfAnIUZjml1FYN0PvsiT76lFks5tNK3UgaJpZM4N_Z1Z .

[alexhulbert]

I'm having issues with this even after applying @manojbhardwaj's css fix. The slides don't scroll correctly in landscape mode. I can swipe past the last page and occasionally the slides revert back to their portrait width for a fraction of a second. Is there any more robust fix available?

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/20