coreui-angular icon indicating copy to clipboard operation
coreui-angular copied to clipboard

Collapse and Accordion body not responsive to height changes

Open eKatchko opened this issue 3 years ago • 0 comments
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.

eKatchko avatar Aug 10 '22 17:08 eKatchko