Datagrid not rendering data correctly if it is inside a modal (height: 0px;)

[boeckMt]

Select one ... (check one with "x")

[x ] bug
[ ] feature request
[ ] enhancement

Expected behavior

Datagrid should render as normal.

Actual behavior

The height of the Datagrid (clr-datagrid) is 0px (element.style { height: 0px;}) so nothing is displayed.

If the modal is open on init -> everything is working. // this.modalopen = true;
If there is no pagination or clrDgPageSize is greater than length of data -> everything is working. // this.paginationsize = 20;

Reproduction of behavior

Create a component with a datagrid inside a modal.
Set modalopen to false and open the modal after browser loaded.

• Include a link to the reproduction scenario you created by forking one of the Clarity Plunker Templates:
  -> https://clarity-light-theme-v11-wjuaba.stackblitz.io

Environment details

• Angular version: 6.0.7

• Clarity version: 0.12.3-patch.2

• OS and version: win

• Browser: all

[youdz]

This is a duplicate of #2364, I just posted the workaround and the explanation over there.
So in your case, just write <clr-datagrid *ngIf="modalopen"> and it will display correctly: https://stackblitz.com/edit/datagrid-modal-fix-2?file=app/app.component.html
It's also better for performance.

[boeckMt]

Thanks for the fast response and the workaround!
Maybe you can add this to the documentation.

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.