When ngFor used within accordion body accordion does not resize appropriately.

[stubbsy345]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

When ngFor is used within an accordion body, the body does not resize appropriately when toggled. The body only seems to resize to static content.

Steps to reproduce:

Related code:

<nb-accordion>
      <nb-accordion-item>
                <nb-accordion-item-body>
                          <div *ngFor="let q of questions">{{ q }}</div>
                 </nb-accordion-item-body>
      </nb-accordion-item>
</nb-accordion>

Angular, Nebular

Angular: 6.1.7
Nebular: 2.0.0-rc.10

[stubbsy345]

Problem solved by changing component implementation for NbAccordionItemBodyComponent to AfterViewInit rather than OnInIt in the nebular package.

EDIT: Just noticed that this change has already in commit 8c7953f though this commit is not merged yet.

[stubbsy345]

Sorry can I confirm has this been fixed on the most recent stable release?

[nnixaa]

Hi @stubbsy345, no, unfortunately, but we hopefully will be able to make it in upcoming releases.

[Prokksi]

Hi, the solution provided does work when doing a ng serve but not when using --prod or --aot, because the ngOnInit function is then missing (which results in an error) and the ngAfterViewInit Function seems never to be called (and the accordion-item-body has no height). Do you have an idea to solve the problem?

[diegoalex]

Hi Guys,
I did a workaround to fix my code until we have a new version released.

I'm using just this peace of scss in the component I have the accordion.

/deep/ nb-accordion-item.expanded nb-accordion-item-body { .ng-trigger-accordionItemBody { height: auto !important; } }

I hope it will help u guys too ;)

[diegohosilver]

Hi Guys,
I did a workaround to fix my code until we have a new version released.

I'm using just this peace of scss in the component I have the accordion.

/deep/ nb-accordion-item.expanded nb-accordion-item-body { .ng-trigger-accordionItemBody { height: auto !important; } }

I hope it will help u guys too ;)

Saved my day. Thanks bud

[MarcoFiusco]

@diegoalex Thank you for the solution!