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

Created on 30 Sep 2018  路  7Comments  路  Source: akveo/nebular

Issue type

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

  • [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

important bug components

Most helpful comment

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 ;)

All 7 comments

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 8c7953fa223ea1e6a2c06c408348e16d8ca75e9f though this commit is not merged yet.

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

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

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?

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 ;)

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

@diegoalex Thank you for the solution!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

henry74 picture henry74  路  3Comments

andredatsch picture andredatsch  路  3Comments

muysewinkel picture muysewinkel  路  4Comments

bestasholli picture bestasholli  路  3Comments

bnbs picture bnbs  路  4Comments