Accordion angular 6 item body not resizing correctly

Topic: Accordion angular 6 item body not resizing correctly

georgegtx pro asked 6 years ago

Hello everyone, the accordion item body does not resize correctly when the child component's content changes dynamically. Example:

<mdb-squeezebox [multiple]="false">
  <mdb-item>
    <mdb-item-head>Some Title</mdb-item-head>
    <mdb-item-body>
        <some-dnamic-component></some-dnamic-component>
    </mdb-item-body>
  </mdb-item>
</mdb-squeezebox>

The problem is in the toggle() function of the SBItembodyComponent:

toggle(collapsed) {
    let height = '0';
    if(!collapsed) {
        this.renderer.setStyle(this.bodyEl.nativeElement, "height", "auto"):
        this.height = this.bodyEl.nativeElement.offsetHeight + 'px';
        this.renderer.setStyle(this.bodyEl.nativeElement, "height", "0"):
    }
    setTimeout(() => this.renderer.setStyle(this.bodyEl.nativeElement, "height", height), 50);
}

Please change it to:

toggle(collapsed) {
    if(!collapsed) {
        this.renderer.setElementStyle(this.bodyEl.nativeElement, "height", "auto"):
    } else {
        this.renderer.setElementStyle(this.bodyEl.nativeElement, "height", "0"):
    }
}

This should fix the bug.

Add comment

Arkadiusz Idzikowski staff answered 6 years ago