Setting minimum width in .widthIn() modifier does nothing

Question

Having tried setting the min width of a column composable in a dialog, it does nothing. It always takes up the width specified as the max width, regardless of where I place the widthIn() modifier in the dialog composable and even if the content's width is smaller than the max width. How can I fix this?

@Composable
fun DeleteUnitTypeDialog(
    addShoppingListItemScreenViewModel: IAddShoppingListItemScreenViewModel,
    onDismiss: () -> Unit,
    onConfirmClick: (ItemUnitType) -> Unit
) {
    val unitTypeList = addShoppingListItemScreenViewModel.itemUnitTypes.observeAsState().value

    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(
            dismissOnBackPress = true,
            dismissOnClickOutside = true,
            usePlatformDefaultWidth = false
        )
    ) {
        Surface(
            shape = MaterialTheme.shapes.medium,
            color = MaterialTheme.colors.surface,
            modifier = Modifier
                .padding(4.dp)
        ) {
            Column(
                modifier = Modifier
                    .widthIn(200.dp, 300.dp)
                    .heightIn(Dp.Unspecified, 500.dp)
                    .padding(top = 16.dp, start = 16.dp, end = 16.dp)
            ) {
                Text(
                    text = "Delete Unit Type",
                    fontSize = 18.sp,
                    color = MaterialTheme.colors.primary,
                    fontWeight = FontWeight.Bold
                )

                Divider()
                Spacer(modifier = Modifier.height(5.dp))

                LazyColumn {
                    if (addShoppingListItemScreenViewModel.itemUnitTypes.value?.size == 0) {
                        item { Text("List is empty.") }
                    }

                    itemsIndexed(
                        items = unitTypeList!!
                    ) { _, item ->
                        Row(horizontalArrangement = Arrangement.Center, verticalAlignment = Alignment.CenterVertically) {
                            Text(modifier = Modifier.weight(1f), text = item.unitTypeName)
                            IconButton(
                                onClick = { onConfirmClick(item) }) {
                                Icon(
                                    imageVector = Icons.Filled.Delete,
                                    contentDescription = "Delete unit type"
                                )
                            }
                        }
                    }
                }

                Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                    TextButton(onClick = onDismiss) {
                        Text(text = stringResource(id = R.string.dialog_cancel), fontSize = 16.sp)
                    }
                }
            }
        }
    }
}

score 1 · Answer 1 · answered Sep 23 '22 at 16:32

1

This is most likely because of Surface. It forces its constraints to first descendant.

You can check this answer out.

Since its max dimensions are dialog max width and height these dimensions will be forced to Column. You can add another Compoasble between to test that your Column will have correct dimensios.

answered Sep 23 '22 at 16:32

Thracian

43,021
16
133
222

Will it fix this issue if I just remove the surface composable and use column by itself instead? – Raj Narayanan Sep 23 '22 at 16:50
You can pass Column dimensions to Surface if you prefer or remove Surface it's up to you. I only pointed out a potential issue that happens because of this feature of Surface. It sets its dimensions to its direct child – Thracian Sep 23 '22 at 16:52
I removed `Surface` and placed `.widthIn(100.dp, 300.dp)` for `Column` and still it ignores the min width of `100.dp` and always displays the dialog at `300.dp`. How can I fix this? – Raj Narayanan Sep 24 '22 at 00:47
But the min height and max height values in the `heightIn()` modifier is obeyed. – Raj Narayanan Sep 24 '22 at 01:35

Setting minimum width in .widthIn() modifier does nothing

1 Answers1