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.

Arkadiusz Idzikowski staff answered 6 years ago


Dear georgegtx, Thanks for posting the solution. We will check this code and try to fix it in near future. Best, Arek

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags