search

vmware-clarity / ng-clarity

Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.
https://clarity.design
Other
344 stars 78 forks source link

Datagrid inside modal has incorrect initial columns width #164

Open belyan opened 2 years ago

belyan commented 2 years ago

Describe the bug

Datagrid inside modal has incorrect initial width of columns equal to zero.

How to reproduce

https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-fherup?file=src/app/app.component.ts

Open modal and check columns width using browser DevTools.

Expected behavior

Width of columns should be correct.

Versions

Clarity version:

Framework:

Framework version:

Device:

Additional notes

Related Issue https://github.com/vmware/clarity/issues/3273

belyan commented 2 years ago

One of possible workaround is to add some delay after opening modal, but before displaying datagrid:

openModal() {
  this.showModal = true;
  setTimeout(() => this.showDataGrid = true);
}

Another workaround is to run detect changes after opening modal, but before displaying datagrid:

openModal() {
  this.showModal = true;
  this.changeDetectorRef.detectChanges();
  this.showDataGrid = true;
}

https://stackblitz.com/edit/clarity-light-theme-clr12-cds5-gwx8j9?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

Jinnie commented 2 years ago

Hello @belyan, The column sizing lifecycle is a bit complicated and we've seen some problems when a datagrid is inside a container that can be invisible at time of component initialization. Historically, just *ngIf-ing the datagrid has been enough, so it can get initialized after its container is visible. Especially for column sizing issues, the ClrDatagrid exposes a resize() method. You can also try using it. Btw, I played with your second stackblitz and for me it works fine without the forced change detection.