Home App Docs Github

Text doesn't wrap when "row" is selected as child layout

I’m trying to create two text elements side by side (as children of a surrounding box). The child on the left is a fixed size. The child on the right is supposed to fill the remainder of the width and then wrap.

Wrapping works properly if “columns” or “stack” is selected as the child layout, but not if "row is selected. How do I get wrapping to work properly if layout is “row”?

Example if “row” is selected (i.e. the text wrapping problem):
image

Example if “stack” is selected (i.e. wrapping working properly)
image

Example if “columns” is selected (i.e. another example of wrapping working properly)
image

Howdy @john!

Sounds like a CSS flexbox quirk, but I’m having a bit of trouble reproducing, could you link us to a page this is happening to so we can try it out and find a good CSS fix you can use?

Howdy @steve!

Yes, here’s the builder page: https://builder.io/content/1a972eb2fd5b4ebcae0710baee428f1e

And, here’s the live page: https://thenewpaper.co/jn-dashboard-testing?cachebust=true

You’ll notice another issue, which is that the left boxes should be fixed at 70px (while the right boxes should fill the remainder of space before wrapping), but it looks like there’s another issue in which the left boxes stretch beyond 70px if there’s a small amount of text in the box on the right. Again, this only seems to be an issue when “row” is selected.

Hi, John!

I took a look at your page and couldn’t figure out why wrapping isn’t working properly with the “row” layout. For now, you can give each box in the parent element a percentage width & the text will wrap as expected.

Here’s what it looks like with the left box at 15%, and the right box at 85%:

Screen Shot 2020-04-07 at 3.53.27 PM

I’ll keep playing around with it to see if I can find the core issue.

Hi Maddy – thanks for looking into this!

The issue with using the percentage width (especially for the left box) is that different screen sizes impact its width in different ways (e.g. the date could wrap on small mobile phones or create too much space on large phones).

I found a work around for this.

If you set the width of the right box to calc(100% - 70px) it wraps properly when “row” is selected.

2 Likes