CODEWITHSUNDEEP
androidandroid-jetpack-composelazycolumn
Rainmaker
Rainmaker

Reputation: 11130

compose LazyColumn crops the content at the bottom

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.

Upvotes: 2

Views: 4217

Answers (2)

Seradu
Seradu

Reputation: 51

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 !

Upvotes: 5

Rainmaker
Rainmaker

Reputation: 11130

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)) { }

Upvotes: 8

Related Questions