Topic: mdbCollapse height of element is not adjusted
When the content of an mdbCollapse element is dynamically filled with *ngFor, the height is not adjusted to its content.
This results in the content of the collapsing element overlapping the element beneath.
<i class="pull-right fa fa-angle-down" [class.rotate-180]="products.isCollapsed" (click)="products.toggle()"></i>
<ul [mdbCollapse]="isCollapsed" #products="bs-collapse">
<li *ngFor="let product of customer.products">{{product.name}}</li>
</ul>
How can i create a collapsable element with dynamic content without this happening?
ps: when editing a question a cannot enter the correct version number (5.2.3)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 7 years ago
Dear ADS@Aareon, Please try to add this element dynamically some height like 100px or something else, and check if it works. If not, try to your global stylesheet add styles from below: .collapse.show { min-height: 100px; } Best Regards, DamianADS@Aareon pro commented 7 years ago
That did the trick, thank you