Clarity: Column overlaps in Datagrid when using expandable rows

[kvanthi]

Describe the bug

_A Datagrid with horizontal scrollbar and long text values can produce overlapping text when expandable rows are used._

How to reproduce

_https://stackblitz.com/edit/clarity-light-theme-v2-qkuu4k_

Steps to reproduce the behavior:

1. Go to 'https://clarity-light-theme-v2-qkuu4k.stackblitz.io/'
2. See overlapping text in columns

Expected behavior

_Column text should not overlap as is the case when no expandable rows are used._

Versions

App

• Angular: [8]
• Node: [8.9.4]
• Clarity: [2.0.0]

Device:

• Type: [ThinkPad]
• OS: [Windows 10]
• Browser [chrome]
• Version [78.0.3904.97]

[gnomeontherun]

Thanks for the report, something is indeed strange here. Updated to Clarity 2.3.1 and still see it happening, but there seems to be some bizarre calculation problem only for some of the columns. Will need to investigate.

[kvanthi]

It looks as if the calculated widths for the headers are shifted by 1 column. The width of header x should be the width of header x+1, etc...

[tnuttin1]

Any progress on this reported bug?

[gnomeontherun]

No progress yet, please review our labels to get a sense of what is being worked on or not.

[gnomeontherun]

One workaround for now is to put an explicit width if you have an issue with a column like this.

[ezekeal]

Another workaround

clr-dg-cell {
overflow: hidden;
text-overflow: ellipsis;
}

or

clr-dg-cell element-around-your-text {
overflow: hidden;
text-overflow: ellipsis;
}

https://stackblitz.com/edit/clarity-light-theme-v2-innstx

[gnomeontherun]

There is a workaround available for this issue, and we recommend using it for Clarity Angular. We would consider a contribution to address this issue if someone is able to work out a solution. As we build Clarity Core implementations, we expect that this issue won’t be an issue or will be configurable on the application side. To help us clean up our backlog, we are going to close this with a functional workaround available and suggest you follow updates for Clarity Core for enhancements that can support your use case with Clarity Core components.