Hi guys :wave: , I hope one of you can shed some l...

# compose

[Nicolai]

Hi guys 👋 ,
I hope one of you can shed some light on my issue..
I have a composable (dialog) that takes a list of items that should fill out a column which has a modifier that wraps the content height.
The list of items comes from an api response so the composable should update once they are ready.
The issue is that if I start by setting an emptyList and then update it later (viewModel observe)… then I don’t see the items as the wrap content height for some reason doesn’t update.
If I fill out the list from the start with fake data that corresponds to the same amount of items from the api then the composable shows all items.
Also if I set the height to not wrap but fillMaxHeight then the items will also be visible..
If I use a LazyColumn then I can see all items but I need to scroll as the height still doesn’t change..

In short… Items get updated correctly, the composable takes the new list of items and inflates the views with the new items and data.. But the height doesn’t change..

But I need it to adapt to the new number of items and wrap that height..

Code in thread…

[Nicolai]

var items by remember {
 mutableStateOf(emptyList<WithdrawalListItem>())
}

viewModel.items.observe.... it-> items = it

CompleteDialogContent(
            listItems = items
)

@Composable
fun CompleteDialogContent(
    listItems: List<WithdrawalListItem>,
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        shape = RoundedCornerShape(32.dp)
    ) {
        Column( modifier = Modifier
            .padding(top = 32.dp, start = 24.dp, end = 24.dp, bottom = 12.dp)
            .wrapContentWidth()
            .wrapContentHeight(),) {
            listItems.forEach { WithdrawalItem(item = it) }
            
        }
    }
}

[vide]

I am not sure if I understand the issue correctly... but what if you remove wrapContentHeight?

[Nicolai]

@vide Thanks for taking the time! Sorry if I’ve been unclear. What is not clear?

It’s a dialog that needs to show all the items hence the card and column needs to wrap the content height.

Unfortunately that doesn’t solve it. The height will then be as high as if the list was empty

[Nicolai]

The dialog will look like this as the initial value is an empty list

[vide]

Wrap doesn't mean the same in Compose as it does in LayoutParams of Views. In Views applying it to a parent will make it size according to the content. But in Compose it will make the content ignore incoming constraints

[vide]

It shouldn't afaik be normally used at all if you don't have composables that don't fit inside each other

[Nicolai]

If I fill it with fake data items that corresponds to the same items it will be the right height and data will be populated correctly:

[Nicolai]

I can also drop the wrapContentHeight but it will still show the height as the list was empty as initially. It won’t make the view higher to make room for the updated list

[vide]

Did you try removing it from all children as well? I think it might be interfering with the layout in your case

[vide]

Here's a quick demo to illustrate:

@Preview
@Composable
fun Demo() {
    Box(
        Modifier
            .size(50.dp)
            .background(Color.Cyan)
            //.wrapContentHeight(Alignment.CenterVertically)
            .size(30.dp) // The size wish is ignored here.
            .background(Color.Magenta)
    )
}

[vide]

And here's where wrapContentHeight is useful:

@Preview
@Composable
fun Demo() {
    Box(
        Modifier
            .size(50.dp)
            .background(Color.Cyan)
            .wrapContentHeight(Alignment.CenterVertically) // Allows the next modifier to ignore the 50dp constraint
            .size(30.dp)
            .background(Color.Magenta)
    )
}

[Nicolai]

Yes I removed it from both Card and the column

[vide]

Still doesn't change the height on recompose? 😮

[Nicolai]

Nope.. Don’t know if it has something to do with the fact that it’s a DialogFragment that has a ComposeView. I don’t get why it doesn’t update the height

[vide]

That sounds strange 🤔 The next thing I would probably try is to see if it changes height if you can render it somewhere else outside the DialogFragment

[Nicolai]

Not sure what you are suggesting 🤔

[vide]

I mean to test if it's the DialogFragment that is causing the issue or is it something inside compose, you could try testing if the height changes outside of the dialog with the same code

[vide]

You can also test using this:

@Composable
fun Demo() {
    val boxes = remember { mutableStateOf(0) }
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            boxes.value += 1
        }
    }

    Column(
        Modifier.width(40.dp).background(Color.Cyan),
        verticalArrangement = Arrangement.spacedBy(5.dp)
    ) {
        (0..boxes.value).forEach { Box(Modifier.size(20.dp).background(Color.Magenta)) }
    }
}

It will just endlessly add elements to the column and the parent size will change

[vide]

I hope you get it working! I have to go sleep now 😴