Custom percentage widths of new rows/columns sometimes break

Beta
#1

This is another little one that’s been a little tough to figure out the repro for, but it boils down to this. If you set custom widths for the new columns, and an element within one of the smaller columns bumps up against the edges, it can cause the layout to break.

For example, in this screenshot you can see the column percentage values on the left, and how the button text within Column 2 is forced to wrap to a second line, and how that pushes Column 3 down a level.

If I remove some text from the button, the widths go back to lookin like what I expect.

(Side note: Is there a technical reason why we can’t write the values for these column widths the same way we could for the classic versions? For example, 1/5 + 2/5 + 2/5, etc.? I’m just so used to the old way, it took me a minute to figure out why the new columns weren’t responding when I used fractions)

#2

Confirmed. I’m not sure just yet what the solution will be here, but we’ll investigate. It could just as easily happen if you drag to resize rather than enter a custom value. Drag to resize is actually the reason we went to percentages instead of fractions for the new element. It’s more consistent if there’s only one unit type for that input.

1 Like
#3

Sorry it’s been so long but I was going back through all the threads and wanted to followup here. We need to find a way to make the resizer handle appear in the right spot.

As for the wrapping, this is really just what happens naturally when you use flexbox. The Column Layout uses flex-basis to set the intended sizes for each column. If your content is wider than the column size it will wrap. You can correct it by using larger columns or smaller content. This should be avoidable because you can set custom sizes per breakpoint.