search

carbon-design-system / carbon-components-svelte

Svelte implementation of the Carbon Design System
https://svelte.carbondesignsystem.com
Apache License 2.0
2.68k stars 261 forks source link

DataTable width overflowing container #1612

Open keehun opened 1 year ago

keehun commented 1 year ago

I am using a DataTable which has contents which I expect to wrap when the cell contents are wider than the layout allows.

Instead, it looks like the table is becoming wider than the parent container.

Is this a known limitation? Is there a way to force the table to stay the 100% it should be and wrap inner contents?

Screen Shot 2023-01-02 at 11 48 19

theetrain commented 1 year ago

Hi @keehun this appears to be a limitation with the Carbon v10 styles being applied. I've observed that overflow-x styles are accounted for in Carbon v11: https://react.carbondesignsystem.com/?path=/story/components-datatable-basic--default

For now, a workaround may be to wrap your table with custom styles as I've suggested here: https://github.com/carbon-design-system/carbon-components-svelte/discussions/1512#discussioncomment-3971540

keehun commented 1 year ago

Thanks @theetrain! I look forward to v11 components/v1.0.0 release milestone! This is the only glaring issue I see/have with Carbon Svelte components. Otherwise, I'm loving it!