Table: adaptive column collapse (when the column width is 100%)
a1eksandrk opened this issue · comments
Hi!
If you set the width to 100 as shown in the storybook example, the column collapses at a small size, which I think is not quite the expected behavior.
However, if you remove the max-width: 0 property, the behavior changes to "more expected", the column does not collapse, but behaves as default, minimum width by content.
What do you think about it? What is the purpose of using max-width: 0?
Hey @Raubzeug Could check this one?
Hi @AlexKomz !
The key purpose of adding maxWidth: 0 is avoiding cell stretching if content overflows. If we remove maxWidth: 0, it will looks like:
Could you please clarify problem with column collapsing? I can't catch it in examples shown in Storybook.
Hi, @Raubzeug! Thank you for your reply
You can watch it here: https://preview.gravity-ui.com/uikit/?path=/story/components-data-display-table--adaptive
Attached screenshots for more clarity. I was expecting the text to be uncluttered.
I have to do workaround max-width: min-content !important; in this case to keep the content from collapsing. Is a more elegant solution possible? I was thinking of a PR to add a minWidth property for a column
@AlexKomz thanks, now I see the problem. Unfortunately it seems that your workaround would let content to stretch the cell as I've shown above :(
I thinks that the most appropriate solution will be to pass the className property to the column with min-width in pixels.
@Raubzeug
Yes, that's what I'm doing as I wrote in a previous post. But of course it is confusing that I need to increase specificity with important, because there are inline styles there 🥲
@AlexKomz
But you should not. You should pass min-width property, it has no collisions with existing props.