compose LazyColumn crops the content at the bottom

Question

I have empty fragment with composable:

setContent {
    Surface(
        modifier = Modifier
            .fillMaxWidth().fillMaxHeight().padding(bottom = 48.dp, top = 16.dp),
        color = colorResource(id = R.color.usaa_white)
    ) {
        val itemsList = (0..50).toList()
        val itemsIndexedList = listOf("A", "B", "C")
        LazyColumn(
        ) {
            items(itemsList.size) {
                Text("Item is $it")
            }
            item {
                Text("Single item")
            }
            itemsIndexed(itemsIndexedList) { index, item ->
                Text("Item at index $index is $item")
            }
        }
    }
}

the problem is: I can only scroll the content until "Single Item" row and the rest of content is hidden. I added some padding to make sure that it wasn't bottomNavBar covering the list but it's still cropped.

What Compose version are you using, and what Android versions you're able to reproduce it? Your sample code works totally fine on **1.1.0-rc03** API 31 emulator to me - I was able to scroll through all the items, as can be seen [here](https://i.stack.imgur.com/fsjCF.gif) — Phil Dukhov, Feb 08 '22 at 04:36
You should use `contentPadding` on the `LazyColumn` instead of applying your padding to its container. — Stephen Vinouze, Feb 08 '22 at 08:49
@PhilipDukhov compose version is 1.0.0 I also have bottomNavBar but as I mentioned I've added padding to make sure it doesn't cover the content. Curious if bottomNavBar could still cause a wrong height calculation for LazyLayout — Rainmaker, Feb 08 '22 at 15:11
@Rainmaker so is this really a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example), have you tried running this exact code and reproduced the issue, or you also have `bottomNavBar` somewhere? Or is it a system one are you talking about? — Phil Dukhov, Feb 08 '22 at 15:16
The same problem here. I have a toolbar, bottomBar, and FragmentContainerView that hosts the navigation graph in the center constraint top to TB and bottom to BB, when I removed TB and BB the LazyColumn works well, once I add one of them the last items become cropped. I tested it with column+verticalScroll and it works fine without any cropped. — Amr Jyniat, Sep 11 '22 at 13:16
@AmrJyniat did you find any working solution? also I tried normal Column and it cropped items too. — mrzbn, Dec 13 '22 at 12:08
I have the same issue if I use compose in fragment, and this fragment do not occupy all screen (because of I have bottom banner) — brucemax, Jan 28 '23 at 22:28

score 6 · Answer 1 · answered Feb 08 '22 at 18:55

6

Looks like the issue is caused by bottomNavBar. What's interesting is that it happens only with LazyColumn and works fine when I use Column The fix I found is to add contentPadding to the bottom. (But hope to find better solution)

LazyColumn(contentPadding = PaddingValues(bottom = 70.dp)) { }

answered Feb 08 '22 at 18:55

Rainmaker

10,294
9
54
89

1

it's a workaround, Did you figure out what is the original issue? – Amr Jyniat Sep 11 '22 at 13:36

score 3 · Answer 2 · answered Dec 20 '22 at 21:57

3

Use Scaffold (check documentation).

Scaffold has a generic content trailing lambda slot. The lambda receives an instance of PaddingValues that should be applied to the content root — for example, via Modifier.padding — to offset the top and bottom bars, if they exist.

setContent {
    Scaffold { contentPadding ->
        Box(
            modifier = Modifier.padding(contentPadding)
        ) {
            // Your code
        }
    }
}

Hope it helps !

answered Dec 20 '22 at 21:57

Seradu

31
2

It looks strange but it helped me.. wow I had the same issue (both for lazycolumn and column) if I used compose in a fragment, and this fragment does not occupy all screen (because I have a bottom banner) – brucemax Jan 28 '23 at 22:49

compose LazyColumn crops the content at the bottom

2 Answers2