coreui-angular
coreui-angular copied to clipboard
Collapse and Accordion body not responsive to height changes
trafficstars
This only affects the coreui-angular repository, it works fine for coreui-vue/react/js. Tested with Firefox (103.0.1 (64-Bit)) and Chromium (Version 104.0.5112.79 (Offizieller Build) Arch Linux (64-Bit)) with "@coreui/angular": "4.1.0".
When the content of the accordion body changes, the height of the accordion-item stays the same. This is also true for the collapse component.
Minimal test case
HTML:<c-accordion id="testAccordion">
<c-accordion-item #item0="cAccordionItem" [visible]="false">
<ng-template cTemplateId="accordionHeaderTemplate">
<button (click)="item0.toggleItem()" [collapsed]="!item0.visible" cAccordionButton>
Accordion item #0
</button>
</ng-template>
<ng-template cTemplateId="accordionBodyTemplate">
<div class="accordion-body">
{{text}}
<br>
<button cButton (click)="text=smallText">change to small text</button>
<button cButton (click)="text=largeText">change to large text</button>
</div>
</ng-template>
</c-accordion-item>
</c-accordion>
TS
smallText: string = 'This is a bit of text.';
largeText: string =
'This is more text. This is more text. This is more text. This is more text. ' +
'This is more text. This is more text. This is more text. This is more text. This is more text. ' +
'This is more text. This is more text. This is more text. This is more text. This is more text. ' +
'This is more text. This is more text. This is more text. This is more text. This is more text. ' +
'This is more text. This is more text. This is more text. This is more text. This is more text. ';
text: string = this.smallText;
You can also test this behavior in the coreui collapse docs or in the coreui accordion docs. Open for example a collapse and edit the inner html of the body with the element inspector, the height is not responsive to changes. Doing the same with coreui-react or coreui-vue shows a responsive collapse body.