Clarity: Datagrid column alignment incorrect

[siteslave]

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

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Actual behavior

Reproduction of behavior

Environment details

• Angular version: 2.4.X

• Clarity version: 0.8.12

• OS and version: macOS 10.12.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Before click on web page:

After click on web page:

[adityarb88]

@siteslave: Please provide a plunker which replicates the issue for us to investigate. Thanks!

[Jinnie]

Probably data is loaded dynamically?
I had some workaround posted in another issue yesterday.

Inject a ChangeDetectorRef instance
constructor(private ref: ChangeDetectorRef) {....
and later on, after data is loaded run this:
ref.detectChanges();

[siteslave]

Thanks @Jinnie.

Data is loaded dynamically, now it work with this solution. 👍

In v0.8.9 is work but v0.8.10-v0.8.12 don't work.

[xuxinsheng]

Before the upgrade clarity to 0.8.12

But why after the upgrade,datagrid becomes abnormal.What's wrong with me?

[Shijir]

Hi @xuxinsheng, please file a separate issue with Plunkr reproduction as your issue looks different than the original issue posted here.

[amellnik]

I'm having the same problem, but I can't use @Jinnie's workaround and add a call to detectChanges() since I already have something listening for changes to the filter settings (and I end up infinitely redrawing the table).

(Note to others: Jinnie is referring to his comment in #623 and #622 is also a dupe).

[rreymer]

There is also an issue that I believe is related to this one.

I am loading my datagrid data dynamically. At the beginning there are just few records, but once the records become too much to be accommodated in the datagrid a scroller appears. The scroller takes part of the space and pushes the cells to the left. Because of this the cells become misaligned.

[Jinnie]

@rreymer, could you provide a screenshot or a plunker?

[rreymer]

Here is the plunker example: https://plnkr.co/edit/3o7x0ryvap5SSDg1wrk9?p=preview
Just add 2 users to the grid by pressing the button.

[klaussilveira]

Confirming this issue: https://plnkr.co/edit/xBpBbQlGSCc2f8tJopK4?p=preview

Happens with data being loaded both on constructor or ngOnInit.

[s-rusev]

@klaussilveira If you replace clrDgItems with ngFor - everything works as expected. Although you cannot use the smart iterator.

[youdz]

Wow, this issue sure got a lot of traction. Sorry for the delay everyone, the fix is now ready, it'll be part of next weeks' release. We will make sure to merge it in both 0.8.x and 0.9.x to accommodate everyone, no matter if you use Angular 2.x or 4.x.

[klaussilveira]

This same issue appears to happen with the new clr-dg-row-detail feature. Unless you click anywhere on the datagrid, the expansion icon does not show.

[github-actions[bot]]

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.