In the sample code linked below, why does the seco...

# compose

[Anthony]

In the sample code linked below, why does the second card not show all of it's elements?

[Anthony]

Row(
    Modifier
        .height(IntrinsicSize.Max)
        .fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)
) {
    Card(
        Modifier
            .weight(1f)
            .fillMaxHeight()
    ) {
        Text("Hello")
    }
    Card(
        Modifier
            .weight(1f)
            .fillMaxHeight()
    ) {
        Column() {
            Text("hello", textAlign = TextAlign.Center)
            Icon(
                imageVector = Icons.Default.SafetyDivider,
                contentDescription = null,
                tint = iBibleYellow
            )

        }

    }
}

[Anthony]

[Will Shelor]

Why do you have the height set to IntrinsicSize.max? One of our devs used intrinsicSize, and it caused some erratic behavior. Does it work if you remove it?

[Anthony]

I need the row to take the height of the largest element in the group, however, setting the row height with intrinsic size min or max does not work at all

[Chris Sinco [G]]

I think you don’t need IntrinsicSize. The height of Row by default will be based on the tallest child. I modified your code a bit by removing some of the fillMaxHeight modifiers, and got this result:

[Chris Sinco [G]]

Modified code:

@Preview(
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Composable
fun Test(
    value: String = "Hello"
) {
    MyTheme {
        Row(
            Modifier
                .fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Card(
                Modifier.weight(1f)
            ) {
                Text("Hello")
            }
            Card(
                Modifier.weight(1f)
            ) {
                Column {
                    Text(value, textAlign = TextAlign.Center)
                    Icon(
                        imageVector = Icons.Default.SafetyDivider,
                        contentDescription = null,
                    )
                }
            }
        }
    }
}

[Chris Sinco [G]]

I introduced the value param to the Composable to test it as a component in a List, which I assume is a use case for this so that the Row height always is set to the tallest content

[Chris Sinco [G]]

List code:

@Preview(
    showBackground = true,
    uiMode = Configuration.UI_MODE_NIGHT_YES
)
@Composable
fun ListTest() {
    MyTheme {
        Column(
            Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Test()
            Test("adfsda lkasdj flaskdjf lkasdjf laksdjf asdlkjf alskdjf alsdjf laskdjf aksdfj dsalkjf dsa")
            Test()
            Test()
            Test("asldfjasldkfj lkj dalskfj lsdajf asldkjaf")
        }
    }
}

[Chris Sinco [G]]

Not sure if this is helpful 🤷

[Anthony]

@Chris Sinco [G] I appreciate the help, but I realize I didn't fully clarify my problem. What I want the row to do is be sized to the tallest element it has, and then have each of the smaller elements fill to the same height as the largest element within the row. Googling led me to the intrinsic size value but, when using it the larger element refuses to expand to it's supposed full size, leaving all the other smaller elements improper.

[Anthony]

@Preview
@Composable
fun PreviewIntrinsicSizeBlockRowText() {
    IBible_TestTheme {
        Row(
            Modifier
                .height(IntrinsicSize.Min)
                .fillMaxWidth(), horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Card(
                Modifier
                    .weight(1f)
                    .fillMaxHeight()
            ) {
                Text("Hello")
            }
            Card(
                Modifier
                    .weight(1f)
                    .fillMaxHeight()) {
                Column() {
                    repeat(10) {
                        Text("More content")
                    }
                }
            }
        }
    }
}

[Anthony]

[Anthony]

This is another test I have when testing out the intrinsic size height, It seems to work when it's a simple column with Text() but fails with my previous example of substituting just a single text and icon in a column

[Chris Sinco [G]]

Gotcha - that is odd. I wonder if this is expected when a child has fillMaxHeight with a parent having height of IntrinisicSize.Max. Maybe @Adam Powell has some ideas

[Chris Sinco [G]]

The other alternative is using BoxWithConstraints or a custom layout, though that makes things a bit more complicated. It’s strange that things work with multiple Text elements, but not when using Text and Icon…