Currently, to account for the first column of a nested row being smaller due to it being indented, the margin-right property is reduced by 50px (and more for further nesting). This however doesn't account for text/content for the column being more than the available space and leads to content overlapping with the next column (This seems to especially be an issue on smaller screens.
Switching to reducing the width of the cell instead would stop this overlapping and allow text-breaking etc. To do this I think there would need to be a way to get the width of this cell (either by passing the value set on the parent column, or getting the width of the cell itself, and reducing this by the same amount as is currently being set by margin-right.
Component(s) impacted
Datagrid
Browser
Firefox
@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version
v.2.35.0
Severity
Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.
Package
Carbon for IBM Products
Description
Currently, to account for the first column of a nested row being smaller due to it being indented, the
margin-rightproperty is reduced by 50px (and more for further nesting). This however doesn't account for text/content for the column being more than the available space and leads to content overlapping with the next column (This seems to especially be an issue on smaller screens.Switching to reducing the width of the cell instead would stop this overlapping and allow text-breaking etc. To do this I think there would need to be a way to get the width of this cell (either by passing the value set on the parent column, or getting the width of the cell itself, and reducing this by the same amount as is currently being set by
margin-right.Component(s) impacted
Datagrid
Browser
Firefox
@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version
v.2.35.0
Severity
Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.
Product/offering
Cloud Pak For Integration (Platform UI)
CodeSandbox or Stackblitz example
https://ibm-products.carbondesignsystem.com/?path=/docs/ibm-products-components-datagrid-nestedrows--docs
Steps to reproduce the issue (if applicable)
Release date (if applicable)
No response
Code of Conduct