How to set the height of a div with Ionic elements properly?

I have a div which contains Ionic elements. The height of the div is set by an angular animation that’s why I need to use CSS height instead of ngIf. But setting the height to 0px does not hide the content completely.

How can I fix this?

<div style="height: 0px;">
    <ion-list>
      <ion-item>
        <ion-label>TEST</ion-label>
    </ion-item>
    </ion-list>
  </div>

This did work in Ionic v3. I can just hide the text by setting the height to . But this does not work in my component tree.

This is probably related to the shadow DOM of Ionic components, but I did not find a solution, yet.

1 Like

A simple app to show this. Moving the inline style to <ion-label> hides it but I would expect setting the height on div to work, too.

Nevermind. After adding overflow: hidden to my container around the div again, this was solved. See example in stackblitz.