There is some bug with VerticalScrollbar in AlertD...

# compose-desktop

[Guldana Kystaubayeva]

There is some bug with VerticalScrollbar in AlertDialog. Buttons overlap it at the bottom. And Text at the top is also moving, when it shouldn't.

18-07-46_Trim.mp4

[Igor Demin]

Can you provide a reproducer? So we could fix it on our end, or suggest how to fix it on your end.

[Guldana Kystaubayeva]

@ExperimentalMaterialApi
@Composable
actual fun DataRequestModal(
    openDialog: Boolean,
    openDialogModify: (Boolean) -> Unit,
    content: @Composable () -> Unit,
    buttons: @Composable () -> Unit
) {
    if (openDialog) {
        AlertDialog(
            modifier = Modifier
                .border(
                    width = 1.dp,
                    color = grey400,
                    shape = RoundedCornerShape(8.dp),
                )
                .width(1080.dp)
                .height(380.dp),
            dialogProvider = UndecoratedWindowAlertDialogProvider,
            onDismissRequest = { openDialogModify(false) },
            title = content,
            buttons = buttons,
        )
    }
}

[Guldana Kystaubayeva]

@Composable
fun DataRequestModalWindow() {
    var openDialog by remember { mutableStateOf(true) }
    val openDialogModify: (Boolean) -> Unit = { openDialog = it }
    val fio = "Иванов Иван Владимирович"
    val defaultList = mutableListOf<String>().apply {
        add(fio)
        add(fio)
        add(fio)
        add(fio)
        add(fio)
        add(fio)
        add(fio)
        add(fio)
    }
    DataRequestModal(
        openDialog = openDialog,
        openDialogModify = openDialogModify,
        content = {
            Column {
                Text(
                    text = "Результат запроса",
                    color = blue100,
                    style = MaterialTheme.typography.h6,
                )
                Spacer(modifier = Modifier.height(12.dp))
                Text(
                    text = "Выберите, кого добавить к заданию",
                    color = blue100,
                    style = MaterialTheme.typography.caption,
                )
                Spacer(modifier = Modifier.height(24.dp))
                Divider()
                // My Table
                val stateHorizontal = rememberScrollState(0)
                val stateVertical = rememberScrollState(0)
                Box {
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(end = 12.dp, bottom = 12.dp)
                            .horizontalScroll(stateHorizontal)
                            .verticalScroll(stateVertical)
                    ) {
                        Divider()
                        defaultList.forEach {
                            Divider()
                            VerticalDivider()
                            Text(
                                text = it,
                                modifier = Modifier.padding(16.dp)
                            )
                            VerticalDivider()
                        }
                        Divider()
                    }
                    Spacer(modifier = Modifier.height(16.dp))
                    VerticalScrollbar(
                        modifier = Modifier
                            .align(Alignment.CenterEnd)
                            .padding(bottom = 12.dp)
                            .fillMaxHeight(),
                        scrollState = stateVertical
                    )
                    HorizontalScrollbar(
                        modifier = Modifier
                            .align(Alignment.BottomStart)
                            .padding(end = 12.dp)
                            .fillMaxWidth(),
                        scrollState = stateHorizontal
                    )
                }
                Divider()
            }
        },
        buttons = {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(24.dp),
                horizontalArrangement = Arrangement.End
            ) {
                ButtonTransparent(
                    text = "ОТМЕНА",
                    color = grey100,
                    onClick = { openDialogModify(false) },
                    modifier = Modifier.padding(end = 16.dp)
                )
                TextButton(
                    colors = ButtonDefaults.textButtonColors(contentColor = Color.White, backgroundColor = blue200),
                    onClick = {
                        openDialogModify(false)
                    }
                ) {
                    Text("ДОБАВИТЬ")
                }
            }
        }
    )
}

[Alexander Kurasov[JB]]

Guldana, could we ask you to crate a ticket on Github for it, so the topic don’t get lost?

[Guldana Kystaubayeva]

Alexander, done ✅
https://github.com/JetBrains/compose-jb/issues/976

[David W]

Is this still on the radar? The bug still exists and I can't find any activity on it.

[Alexander Maryanovsky]

I closed the ticket. Putting scrollable content in an AlertDialog is not a supported use-case. It’s only meant to be used with Text.