Dynamic height for ion-slide cards


#1

Is there a way of dynamically setting the height of an ion-slide inside an ion-slide-box? When my ion-slide elements have a lot of content in them they overflow the screen and the user has to scroll down to see the pager. I’m looking to resize the height based on percentages, so the slide box will always take up, say, 80% of the screen. Thanks!


#2

Create me a working example of this problem and I will fix it for you.

If you don’t have a template find it here.


#3

I’m currently testing the slide box on all the iPhone screen layouts. Here is my code for the scroll box:

I’m looking to dynamically resize the height based on percentages, so the slide box will always take up, say, 80% of the screen (just edited the question to clarify this). Thanks!


#4

Something like this: http://codepen.io/anon/pen/xGoLMM


#5

Hm, it doesn’t seem to be working on the iPhone simulator when the content overflows. It works fine on the Codepen, though…


#6

Unfortunately, I can’t help you with that. My Mac is in closet and it’s not going out of there :wink:


#7

iOS implementation is probably using some other class names. Advice, try accessing list DOM content and output it into command line so you can view it easily. Then compare them with class names used in desktop example.


#8

Will do, thanks for the help.


#9

Okay, so after some debugging I found that the slide box won’t resize dynamically if it’s placed in ion-content. Any ideas as to why this is an issue? I tried to set the ion-content height to 100% to no avail.


#10

ion-content is not a problem, it’s a scroll class inside: http://codepen.io/anon/pen/yNdzZr


#11

Right, I tried that earlier but look at what happens when you get to the bottom of the list.


#12

What about this one: http://codepen.io/anon/pen/gpNXrK


#13

That works better but partially obscures the bar at the bottom (the last ion-item). Also, the pager overlaps the card itself which shouldn’t happen.


#14

Then play with it until you find a right combination. I bet you can do this now when you know how it’s done.


#15

Okay, thanks. I actually ended up just vertically centering the cards and calculating their heights via Angular.