Hi :wave: , Is there a way to have a Composable wi...

# compose

[Nicolai]

Hi 👋 ,
Is there a way to have a Composable with modifier that wraps the content height on my text but also makes sure that an image inside that composable is filling the maximum available height?

I've tried to set the modifier to wrapContentHeight. But then my image inside won't scale to the full height. If I then set the modifier on the image to fillMaxHeight it exceeds the height coming from the wrapping of the text.

Something like:

DefaultCard(
        Modifier
            .padding(horizontal = 16.dp)
            .wrapContentHeight()
            .fillMaxWidth()
    ) {
        Text(text = "looooooooooong text........")
        Image(needs to fill all available space in the height as of wrapping the Text element)
    }

[Nicolai]

I'll just do it onGloballyPostioned. Was just wondering if there were an easier/nicer way

[Jonas]

Box(Modifier.size(500.dp, 1000.dp)) {
        Row(Modifier.height(IntrinsicSize.Min)) {
            //Image
            Box(Modifier.aspectRatio(1f).background(Color.Blue))
            Text("Foo\nBar\nFoo")
        }
    }

My first idea was something like this.
But according to your description you need a Card (Box) as wrapper instead of the row I used here.

[Jonas]

But something like this could work, I am not entirely sure what you want to achieve:

Box(Modifier.size(500.dp, 1000.dp)) {
        Box(Modifier.height(IntrinsicSize.Min)) {
            //Image
            Box(Modifier.fillMaxHeight().width(10.dp).background(Color.Blue))
            Text("Foo\nBar\nFoo")
        }
    }

[Jonas]

@Nicolai helpful?

[Nicolai]

@Jonas Sorry Jonas I haven't tried it. I found out that matchParentSize was what I was looking for. But thank you very much for trying to help out 🙏