Jetpack compose layout changes in dialog doesn't update the size

8
votes

I've got a dialog where the user can select something and depending on the choice, the layout will be updated. The problem is that the height of the dialog is never updated to reflect the layout changes.

How to recompose the dialog to make the layout fit in the dialog?

Example:

@Composable
fun AlertDialogTest() {
    var showDialog by remember { mutableStateOf(false)}
    var showExtra by remember { mutableStateOf(false)}
    Button(onClick = { showDialog = true }) {
        Text("Open dialog")
    }
    if (showDialog) {
        AlertDialog(
            text = {
                Column { Button(onClick = {showExtra = true}) {
                        Text ("Show rest of dialog")
                    }
                    if (showExtra) {
                        Text("More text", style = MaterialTheme.typography.h5)
                        Text("Even more text", style = MaterialTheme.typography.h5)
                    }
                }
            },
            confirmButton = { TextButton(onClick = { showDialog = false }) {
                Text("Close")
            }},
            onDismissRequest = {showDialog = false},
        )
    }
}

And the result:

enter image description here

2
android-jetpack-compose

2 Answers

2
votes

It did work as expected for me in beta08. Then, after upgrate to rc02 it stopped working - popup dialogs, drop down menus (basicaly all elements that are backed by platform windows) stopped resizing properly on content size change. And indeed I've found a bug for it - https://issuetracker.google.com/issues/194911971. And for now I, sadly, haven't found a workaround, so we better wait until it's fixed.

UPD. As is commented in aforementioned issue, there is a workaround. Check the answer here.

1
votes

I've also faced the same issue, and found the solution for a longer text or other contents in Jetpack Compose Alert Dialog

 AlertDialog(
    onDismissRequest = { },
    properties = DialogProperties(usePlatformDefaultWidth = false),
    modifier = Modifier
        .padding(28.dp)
        .fillMaxWidth()
        .wrapContentHeight(),
    title = null,
    text = {
           // Your alert dialog content
    },confirmButton = {
        TextButton(onClick = { /*TODO*/ }) {
            Text(text = "OK")
        }
    })