CODEWITHSUNDEEP
htmlcssangularionic-frameworkionic3
juniortan
juniortan

Reputation: 206

Parent DIV height:0px but child element still shows

While looking for a way to implement navbar drop down menu (similar to accordion) I came upon this youtube video which uses custom component and manipulating max-height of card-content element to achieve the desired effect.

HTML:

<ion-card>
  <ion-card-title text-center color="primary" (click)="toggle()"></ion-card-title>
  <ion-card-content #cc>
    <p>Hello World!</p>
  </ion-card-content>
</ion-card>

CSS:

.card-content{
  max-height: 0px;
}

TS:

toggled = false;
@ViewChild("cc") cc: any;

toggle() {
  if (this.toggled) {
    this.renderer.setStyle(this.cc.nativeElement, "max-height", "0px");
  } else {
    this.renderer.setStyle(this.cc.nativeElement, "max-height", "500px");
  }
  this.toggled = !this.toggled;
}

All was working fine while following the video from start to finish. However what I wanted was a drop down menu from navbar so I decided to edit part of his code to... 

#cc{
    max-height: 0px;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>

<div #cc id="cc">
  <p>Hello World!</p>
</div>

But it is not working as expected. When div is (0px) i can still see the elements that it contains, in this case it's "Hello World!"

Am I doing something wrong here, or does it only work specifically with ion-cards?

Upvotes: 0

Views: 470

Answers (2)

M Joe
M Joe

Reputation: 58

use overflow: hidden;

#cc{
    max-height: 0px;
    overflow: hidden;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>

<div #cc id="cc">
  <p>Hello World!</p>
</div>

Upvotes: 3

Johannes
Johannes

Reputation: 67748

Just add overflow: hidden; to the parent:

#cc{
    max-height: 0px;
    overflow: hidden;
}
<ion-navbar text-center color="primary" (click)="toggle()"></ion-navbar>

<div #cc id="cc">
  <p>Hello World!</p>
</div>

Upvotes: 4

Related Questions