Hi everyone, How is the height of a parent composa...

# compose

[Alperen]

Hi everyone,
How is the height of a parent composable determined based on a specific child composable within it?
I found 2 solutions with onGloballyPositioned modifier, Layout and ConstraintLayout. However, these solutions seem workaround to me. In SwiftUI, we can simply solve this by applying negative padding to the Image. As far as I know, Compose doesn't have negative padding. Is there a simpler solution? I uploaded my current solution to this repo:
https://github.com/alp-well/MyCard

Detailed Explanation : I created a card. Inside it, there's a row containing a column with 2 texts and an image. The image has a fixed size (100x160). If the user prefers a large font size, the texts inside the column grow, and the image remains vertically centered within the card. There's no problem with this. However, if the user prefers a small font size, the height of the column becomes smaller than the image. In this case, the height of the parent composable, i.e., the row, becomes equal to the height of the image, and I don't want this. I want the height of the row to be determined solely by the column, without being affected by the image. So, when a small font size is used, the image should appear cropped. I have attached a picture for visual explanation.

[Joel Denke]

Compose actually allows negative padding 😜 You can have negative Dp without a problem.

I personally would not expect the row to decrease in height if font size does, imo breaks the entire UI by doing so. Expanding it however I think should work, which no problem. I would expect the size to always be minimum of the set image min height. Like if your image is 60.dp height minimum, would expect Row always being that even if text is smaller.
I think trying to solve a problem not really should be a problem. But my opinion.

[Alperen]

It seems like Compose doesn't allow negative padding. I tried, but it didn't work. When you mention negative padding, are you referring to a workaround like the one in the link?

[Joel Denke]

Dont remember, never needed to use negative paddings in compose for a very long time. Maybe was supported back then but not now, not sure.

[Zach Klippenstein (he/him) [MOD]]

I believe you could use Modifier.wrapContentHeight(unbounded=true) on the image to get this

[Alperen]

I guess wrapContentHeight solution works only if parent composable has fixed height. For example, code below does not work for this case

@Composable
fun WrapContentHeightSolution() {
// Unfinished
Card(
modifier =
Modifier
._padding_(start = 20._dp_, end = 20._dp_, top = 4._dp_, bottom = 12._dp_)
._fillMaxWidth_(),
) *{*
Row(
modifier =
Modifier
._graphicsLayer_ *{* clip = true *}*,
) *{*
Column(
modifier =
Modifier
._weight_(1f)
._padding_(start = 16._dp_, end = 12._dp_, top = 16._dp_, bottom = 16._dp_)
._align_(Alignment.CenterVertically),
) *{*
HeaderText()
BodyText()
}

Image(
painter = painterResource(R.drawable._image_),
contentDescription = null,
contentScale = ContentScale.FillBounds,
modifier =
Modifier
._width_(100._dp_)
._wrapContentHeight_(unbounded = true, align = Alignment.CenterVertically),
)
}
}
}

[Alperen]

To be more clearify WrapContentHeightSolutionPrev is not expected.

[Zach Klippenstein (he/him) [MOD]]

Try ContentScale.FillWidth?