You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When zooming in, the cells will start squishing together and the contents will overlap with one another. This happens when no static min-width is given to the DataGrid control (or to the columns themselves), both of these are optional so I wouldn't expect this behavior in any case since there isn't documentation about needing those stylings explicitly (or that I've seen). You can see the first two row items have cells with content overlapping.
Expected Behavior
I wouldn't expect any of the cell contents to start spilling over. I would expect the contents to truncate and the cells to have some min width and maybe a horizontal scrollbar if applicable. You can add a style for minWidth for the container (like in the fluent storybook examples) but I don't think that is a good solution for various screen sizes.
@mainframev I did look at those but given that they're optional properties, I would not expect the behavior to result in bad reflow if those properties weren't provided by the consumer. Is it expected that a consumer provides those optional properties? If so, shouldn't they be required? And it looks like TableCellLayout is pretty much required to be used for truncation?
Component
DataGrid
Package version
9.55.1
React version
17.0.2
Environment
Current Behavior
When zooming in, the cells will start squishing together and the contents will overlap with one another. This happens when no static min-width is given to the DataGrid control (or to the columns themselves), both of these are optional so I wouldn't expect this behavior in any case since there isn't documentation about needing those stylings explicitly (or that I've seen). You can see the first two row items have cells with content overlapping.
Expected Behavior
I wouldn't expect any of the cell contents to start spilling over. I would expect the contents to truncate and the cells to have some min width and maybe a horizontal scrollbar if applicable. You can add a style for minWidth for the container (like in the fluent storybook examples) but I don't think that is a good solution for various screen sizes.
Reproduction
https://stackblitz.com/edit/tx9pqbxi?file=src%2Fexample.tsx
Steps to reproduce
Go to stackblitz and zoom in to like 300% and you should be able to see that the cell contents overlap.
Are you reporting an Accessibility issue?
yes
Suggested severity
High - No workaround
Products/sites affected
SFE
Are you willing to submit a PR to fix?
Yes, if it is an easy fix but otherwise would prefer not to.
Validations
The text was updated successfully, but these errors were encountered: