Cannot get ion-scroll to work with my wizard


#1

I have been beating my head over this. I hope i didn’t make the wrong decision to use IONIC instead of going native.

I have a wizard that I built. And i have a list of item next to it that i want to scroll. the only way i can get it to work is to change the ion-scroll style to display: inline. but then the scroll doesn’t work right. If i dont change that it doesn’t scroll at all. I stripped down my code and put it in this pen. Hopefully someone can help me with this.

Just a heads up I am a C# expert not an HTML and CSS expert. Just learning my way though for IONIC.


#2

you have to set a fixed height to your ion-scroll and remove the display:inline styling.

e.g. set the height to 300px,

if you want to set the height to the rest-height of the content area --> you need to calculate it with javascript


#3

Thank you bengtler.

Setting an explicit height is not a valid solution, and really shouldn’t be for anyone. Since different devices are different heights. The only way I could see that being a valid solution is if the app is also going to always have maybe 5 elements for the user to pick from, but even then the developer should prolly use a “select” control. The list in the real app is dynamic and can be a different size for different users. I can set the height to the appropriate height on my device, but then on someone else’s device it is going to look very stupid with the height being set wrong.

It looks like the only real professional way to salve this is like you said to calculate the devices height using javascript. Looks like i have some research to do :smile:


#4

i’ve written a little directive --> to get the offset height of a parent element:

Maybe you can use this :wink: