I feel silly, but if I try to have a Row that contains a single line of text and a 24 x 24dp icon, t...

# compose

[Colton Idle]

I feel silly, but if I try to have a Row that contains a single line of text and a 24 x 24dp icon, the icon gets cut off. What am I doing wrong? Code in thread

[Colton Idle]

Row(
    verticalAlignment = Alignment.CenterVertically,
    modifier = Modifier
        .fillMaxWidth()
        .padding(horizontal = 16.dp)
) {
    Text(
        myReallyLongTextVal,
        maxLines = 1,
        modifier = Modifier.padding(end = 16.dp),
        overflow = TextOverflow.Ellipsis
    )
    Image(
        //myimageresource,
        modifier = Modifier
            .requiredHeight(24.dp)
            .requiredWidth(24.dp),
    )
}

[Albert Chang]

Modifier.weight(1f) on the Text?

[Colton Idle]

That works... but why? I really expected it without having to set a weight.

Row is set to fill parent width
Text has a single line with ellipsis requirement
Image has required height and width

🤔

[Albert Chang]

Without weight children are measured in order. The parent isn't clever enough to automatically reserve space for the children after. This is the same as the view system.

[Timo Drick]

@Colton Idle can you try using

.height(IntrinsicSize.Max)

on the Row.

[Colton Idle]

@Albert Chang really? I could have sworn that this would have worked. 🤦

[Colton Idle]

@Timo Drick that also worked. No idea why...

[Colton Idle]

@Albert Chang actually. weight1f on the text doesn't really give me what I need because if the text is short, then the icon gets pushed alllll the way to the right.

[Colton Idle]

So intrinsic height seems to work, but the padding on the row does not.

😭

[Colton Idle]

Still can't get it to work. Blue square doesn't show.

@Preview
@Composable
fun TextWithSquare() {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .height(IntrinsicSize.Max)
            .fillMaxWidth()
            .padding(horizontal = 16.dp)
            .clickable { }
    ) {
        Text(
            "Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. Very long text. ",
            maxLines = 1,
            modifier = Modifier
                .padding(end = 16.dp),
            overflow = TextOverflow.Ellipsis
        )
        Box(
            Modifier
                .background(Color.Blue)
                .requiredHeight(24.dp)
                .requiredWidth(24.dp),
        )
    }
}

[Timo Drick]

Now it is because it is out of view. In this case you need this weight modifier to make sure the Text composable do not consume all the space.

[Colton Idle]

Where does the weight modifier go?

[Timo Drick]

On this component which should take the rest of the space (in your case the Text component)

[Timo Drick]

You could also have 2 or more composables with weight modifier. Than the space is distributed to all of them.

[Timo Drick]

It is the same behavior like in the legacy view system of LinearLayout.

[Timo Drick]

Row/Collumn = LinearLayout

[Colton Idle]

@Timo Drick my problem with the weight modifier is when the text is "abc" then the blue box doesn't show up next to the text.

[Colton Idle]

I think I will post a new question that actually shows (with a screenshot) what I'm looking for as it wasn't necessarily clear at the start of this question.

[Colton Idle]

Thanks all