Hide show ion-slide-box


#1

Hello team.

I have two “ion-slide-box” and two buttons on my page. On page load only the first ion-slide-box is visible. When I click on button #2, the second ion-slide-box should get visible and hide the first ion-slide-box and vice-versa.

I am applying display: none; to the second ion-slide-box initially and then apply display: block; when I click on the button on my page. At that time the second ion-slide-box appears broken with all slides being displayed overlapping each other.

See attached images for details.
Image #1: first page load - Only first slider is visible

Image #2: onclick - When clicked on button “Two” the second slider is visible but distorted.

How do I overcome this?

Regards
Shreerang
Spatial Unlimited


#2

Set dimensions of your slides in css.


#3

@Maxim applying width to ion-slide is not helping. I have tried that!


#4

@mhartington any help?


#5

Can you put together a codepen or plunker?


#6

if many ion-slide
$ionicSlideBoxDelegate.$getByHandle(your-handle-name).update(); in your controller

Or
If you have one ion-slide
$ionicSlideBoxDelegate.update(); in your controller


#7

Hey…Do you get any solution for this problem …Because i am also facing the same problem…?