[Tabs][Datagrid]Initial column width for datagrid column appearing as zero

[winstonfernandes]

Describe the bug

When datagrid is placed within tabs the initial width of column header is appearing as zero due to this there are alignment issues when minimum column width is provided. When the column
is resized the widths are updated correctly

How to reproduce

https://stackblitz.com/edit/clarity-dark-theme-v1-0-datagrid-issue

Check the width of the column during after initial rendering.

Steps to reproduce the behavior:

1. Create datagrid in tabs
2. check the column width

Expected behavior

The column width should be non-zero after initial rendering

Versions

App

Angular: 7.2
Clarity: 1.1.2
Device:

OS: [Windows Server 2012]
Browser [Chrome]
Version 72.0.3626.121

[hippee-lee]

Hi there,

I looked at the example (thank you for that). It looks like there were some implementation issues that were causing the misalignment. It's hard to tell what the data should be but when I clean up the template and declare the datagrid as described by the documentation for binding properties, then column widths work as intended.

I'm closing this as it doesn't seem to be an issue. If you have more questions about getting the datagrid up and running please ask on stack overflow and tag it with vmware-clarity.. If I misunderstood what the datagrid was trying to do please let me know.

Here is a working version of the original example: https://stackblitz.com/edit/gh-3273-datagrid-column-width-question

[winstonfernandes]

The working version still shows the width as zero

[winstonfernandes]

Proper width is shown on resizing any column. Please let me know if my understanding is wrong. There will be alignment issues if min-width is required on the column. The screenshot after resizing is attached.

[hippee-lee]

There is something odd with your example code but I didn't dig deep enough to figure out exactly what. I checked with a simple datagrid that column widths are calculating as expected: https://stackblitz.com/edit/datagrid-simple-columnwidth

If this issue is happening in a production app, then I would suggest starting with the simplest grid you can e.g hard coded (like in the example) and then adding on more complexity (real data and real interpolation of the data for the names and values in headers and cells).

[winstonfernandes]

The issue occurs when the datagrid is present in vertical tabs. For some of the pages we are required to keep the datagrid within vertical tabs. Please let us know if there is a work around for this. Can you please re-open this issue because we are seeing this issue whenever datagrids are present in vertical tabs. In our case this happens to be a major use case. Let us know if there is any other information required.

[hippee-lee]

Hi there. It sounds like from the last comment this is with a vertical tabs layout, correct? I'll re-opan and label this as waiting for more information.

Please provide a reproduction with stackblitz that demonstrates the issue. For simplicity, please fork the simple datagrid stackblitz from above and add your vertical tabs code to it.

[winstonfernandes]

I have updated the code. The issue is seen with the latest version of clarity. Not sure after which version it stopped working. The issue can be seen with 1.1.2. Working fine till 1.0.4. The reproduction with stackblitz attached. I have updated the clarity version. The link https://stackblitz.com/edit/datagrid-simple-columnwidth-with-tabs.

[hippee-lee]

Thanks for the reproduction. It seems like a lifecycle issue and will need more investigation.

[Jinnie]

I researched it a bit, though I don't yet have a solution.
The width is applied as part of the header renderer directive, which listens to changes on a column state object.
What changed on the tabs is that content used to be directly projected there with ng-content while now we're iterating over the contents children and applying their exposed templates one by one.
As @hippee-lee said, this probably leads to lifecycle issues, by changing the order of initialization of the templates vs the renderer directive.

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