Hello :wave::skin-tone-2: , if I want to get my `LazyColumn` to properly add padding to accommodate ...

# compose-ios

[Ryan Simon]

Hello 👋🏻 , if I want to get my LazyColumn to properly add padding to accommodate the software keyboard on iOS, what should I do? I tried adding imePadding to my modifier, and it kinda works, but ends up with way more padding than needed and doesn't allow me to scroll all the way to the top.

Included a video and code to look at in thread 🧵

[Ryan Simon]

Video here:

Simulator Screen Recording - iPhone 15 - 2023-12-06 at 11.52.21.mp4

[Ryan Simon]

Code that powers the UI in the video

Untitled.kt

[Alexander Maryanovsky]

Don’t do LocalSoftwareKeyboardController.current?.hide() in the composition. Composition is supposed to be free of side effects. Put it in a LaunchedEffect.

[Ryan Simon]

good to know, though it does nothing to solve any of my problems as seen in the video

[Alexander Maryanovsky]

Try these:
1. Reverse the order of imePadding() and fillMaxSize().
2. Don’t use a LazyColumn for a single item (and fillMaxSize!)? Just use Modifier.verticalScroll() on the Column.

[Alexander Maryanovsky]

2 will probably solve it

[Alexander Maryanovsky]

If you want to use a LazyColumn don’t put items into it that are fillMaxHeight.

[Alexander Maryanovsky]

They should either be fixed-height or have an intrinsic height of their own.

[Ryan Simon]

good tips, thanks. here's what i have now and the UI behavior hasn't changed at all

LaunchedEffect(showImage) {
            if (showImage) {
                softwareKeyboardController?.hide()
            }
        }

        LazyColumn(Modifier.imePadding().fillMaxSize()) {
            item {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth()
                ) {

[Ryan Simon]

the lazy column is here just as a test, and the intention would be to have multiple elements inside it

[Ryan Simon]

i'm feeling like this is a bug maybe? cus on Android this works fine

[Alexander Maryanovsky]

Possible, but let’s get it to a clean reproducer before we submit a bug report.

[Ryan Simon]

okay, what would be a clean reproducer in your mind?

[Alexander Maryanovsky]

I vaguely remember seeing a bug report of this. Let me try and find it.

[Alexander Maryanovsky]

It seems to be one of the issues reported here: https://github.com/JetBrains/compose-multiplatform/issues/3621

[Alexander Maryanovsky]

Here’s a reproducer:

@Composable
fun IosApp() {
    MaterialTheme {
        LazyColumn(Modifier.imePadding().fillMaxSize().background(Color.Yellow)) {
            items(10) {
                ListItem()
            }
        }
    }
}


@Composable
private fun ListItem() {
    var text by remember { mutableStateOf("") }
    TextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier.fillMaxWidth().padding(vertical = 40.dp, horizontal = 20.dp)
    )
}

[Alexander Maryanovsky]

I submitted a bug here

[Ryan Simon]

Thanks for doing that 🙏🏻