Is there a way to tell `Text` to wrap to a second line to avoid pushing things off screen? Inside a ...

# compose

[robnik]

Is there a way to tell Text to wrap to a second line to avoid pushing things off screen? Inside a screen-wide Column I have:

Row {
   Text("A somewhat long line that needs to wrap probably")
   Spacer(Modifier.width(3.dp))
   Switch(model.foo, { model.foo = it })
}

The Text and Switch are overlapping a bit, and the Switch half pushed off screen.

[Vadim]

My switch-with-title is implemented like this:

Row {
        Column(modifier = Modifier.weight(1f)) {
            Text(title)
        }

        Column {
            Switch(checked, onCheckedChange, enabled = enabled)
        }
    }

The key thing is .weight(1) , also the parent of this Row has constraint like .fillMaxWidth() (not sure if this is a requirement). With these, text fills all available horizontal space and keeps Switch aligned to the end

[Vadim]

And yes - long text wraps in multiple lines

[Luke]

I agree with .weight(1f), although I'm not sure the extra columns are necessary. You could try applying the weight directly on Text

[Vadim]

Hmm, last time I checked I couldn't do this... Sure, that would be much simpler

[robnik]

It works for me with just the weight on Text, but I have no idea why, which is annoying. If anything, I'd thinking giving higher weight to Text would cause it to be more likely to push other things off screen.

[robnik]

Anyway, thank you!

[Luke]

What weight does basically is it tells the row that we want everything to fit in the column's height or row's width, and to take weight/total weight of the parent. Those without weight default to wrap content, and those with weight take their fraction of the remaining space