Datatable action bar/ heading has white space on the right side for smaller resolutions

[prince737]

Description

For smaller resolutions when the datatable becomes scrollable the table heading and action bar has does not match the width of the table. They have a rem of white space on the right.

Environment

[email protected] [email protected] Through cloud [email protected]

Screenshot

The below screenshot is from react storybook itself

[asudoh]

HI 👋 thank you for reporting - Do you have a reduced case based on https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox? In this way somebody may be able to jump in and help.

[prince737]

Hi @asudoh I was not able to re-create the issue in a sandbox. However, in the process of trying to re-create, I found out the reason of why such a gap is visible. Consider this example: http://react.carbondesignsystem.com/iframe.html?id=datatable--with-batch-actions&viewMode=story

Here the datatable in enclosed in a div whose width is set to 100%. If you remove that the width attribute from that div the gap is gone. In my actual code, this 100% is set on a bx--col. Removing it is not an option for obvious reasons.

Here is the sandbox where I was trying it out (issue did not reproduce here): https://codesandbox.io/s/confident-driscoll-1l08v

I will let you decide whether to close this or not.

Below screenshots show what I mean.

In cases where a parent has 100% width specified, the actual table is overflowing the bx--table-container.

[asudoh]

Tried http://react.carbondesignsystem.com/iframe.html?id=datatable--with-batch-actions&viewMode=story, but couldn't reproduce the issue. As you said, closing this for now, but if you get a reduced case don't hesitate to tell us and we can reopen the issue. I think you are close to creating one because you seem to have your code where the problem reproduces. What's needed is isolating the problem you have. Thanks!

[prince737]

Hi @asudoh To reproduce the issue in the above link, you need to resize your browser window to a point where the table becomes scrollable and then you can see the issue.

I will try recreating, If I am able, will get back. Thanks.

[asudoh]

Tried to show horizontal scroll bar as well as vertical scroll bar, but no luck in my end. Probably I'm missing something? Anyhow great to have a reduced case. Thanks!

[prince737]

Got it to reproduce now. Check it at https://codesandbox.io/s/confident-driscoll-1l08v Remove the width:100% from the container div and the issue will be gone.

Also, here is a quick recording from storybook: datatable-issue-480p.mov.zip

[prince737]

@asudoh Hi, since the issue was reproduced in an isolated instance can you please re-open this?

[asudoh]

Thank you for the reduced case. Reopening. A workaround is setting table-layout: fixed to the <table>, but it's a breaking change.

[reeteshsingh93]

@asudoh So shall we go with the workaround? or do we have plan to fix this permanently ?

[asudoh]

I'll defer to the team, but given the workaround is a CSS tweak I think you can go with the workaround as you said.

[tw15egan]

There have been changes to the DataTable so I would update to the latest and verify that this is still an issue.