I have created simple `Row` with some `Text` and...

# compose-desktop

[Danish Ansari]

I have created simple Row with some Text and IconButton but IconButton is going outside the Row, no idea why?

Row(
    modifier = Modifier.fillMaxWidth().border(1.dp, Color.Red).padding(8.dp),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = <http://Alignment.Top|Alignment.Top>,
) {
    VeryBigText(modifier = Modifier.border(1.dp, Color.Yellow))
    IconButton(   onClick = {}, modifier = Modifier.requiredSize(24.dp).border(1.dp, Color.Green)) {
        Icon(
            Icons.Default.Close,
            contentDescription = "Dismiss",
            modifier = Modifier.requiredSize(16.dp)
        )
    }
}

What am I doing wrong?

[Dominaezzz]

Looks like VeryBigText is doing something naughty like Modifier.fillMaxWidth() .

[Dirk Hoffmann]

I guess VeryBigText has a .fillMaxWidth() also, and that is eating up all the Row's width

[Adam Powell]

it doesn't necessarily have to have a modifier doing it, the text is the first element in the row and is long enough to break onto three lines, so it's taking up the space it wants first before the buttons get a chance to.

[Adam Powell]

Use Modifier.weight(1f) on the VeryBigText to tell the row to measure it last after all of the other children have been measured and take up the remaining space.

[Danish Ansari]

I can assure there is no fillMaxWidth() on VeryBigText

@Adam Powell setting weight(1f) solved the problem, up until now I used to think that weight(1f) is equivalent to fillMaxWidth()

Thanks for clearing the doubt