Ion-scroll does not take up the content height

Ionic Framework ionic-v3
1

On my app there is a panel that shows / hides when you click a button which takes up about 300px of the screen.

Inside this panel I have included an ion-scroll. The problem is the content inside the ion-scroll wont show unless I specifically give it height in px. But that shouldn’t be the case. Theion-scroll should only take up the calculated height of it’s contents as the content inside this panel will get added or removed and the height should adjust accordingly.

<ion-content>
<div class="myPanel" *ngIf="showPanel" style="max-height: 300px;">
<ion-scroll>
  Some content inside the ion-scroll
</ion-scroll>
</div>
</ion-content>
2

Ion-scroll is meant to be an empty container, so you can add your own styles and create a scrollable container. You’ll want to set those styles on the ion-scroll it self, and not the div.myPanel

3

<ion-scroll style="max-height: 300px">

<ion-scroll style="height: auto">

None of those seem to work.

It has to be <ion-scroll style="height: 300px">.

But I can’t specify a fixed height. I want it to grow or shrink according to content. Is that not possible with ion-scroll?

2 Likes
4

I am also facing same problem. I have my landing page fixed and a bottom container for list which should be scrollable as per list grows.Its not working to me .

1 Like
5

Can you share some code/markup?

Again, ion-scroll is meant to be an empty container for you to apply your own styles on.