Set ion-scroll height using percentage instead of pixels

ionic-v1
1

Hello everyone!

It’s really easy to set the ion-scroll’s height by using pixels for example

<ion-scroll zooming="false" direction="y" style="width: 100%; height: 500px">

But once I set this parameter to a percentage value it breaks, the follow codepen reproduces it

I saw a similar question and I tried a few things but without success.

I appreciate any ideas/hints to solve this problem :smile:

2

Remove the inline styling on ion-scroll and add this to the CSS:

.scroll-view {
  width: 100%;
  height: 100%;
}

.scroll {
  height: 50%;
}

You’re also missing the closing </ion-scroll> tag in the codepen.

2 Likes
3

Thanks a lot @brandyshea,it makes sense now why it wasn’t working before :slight_smile:

1 Like