https://kotlinlang.org logo
#compose
Title
# compose
m

Marcin Wisniowski

02/04/2022, 11:28 PM
This is probably something silly, but I just can't find a solution: I have a scrolling column of cards, with a header with a shadow (elevation) at the top (screenshot 1). For some reason, the header's shadow is not visible when a card is under it (screenshot 2). Why is that? How to fix it?
1
Copy code
Column(
        modifier = Modifier.background(MaterialTheme.colors.background)
    ) {
        Surface(
            elevation = 8.dp,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text("Header with shadow")
        }
        LazyColumn(
            contentPadding = PaddingValues(
                vertical = Dimensions.verySmall,
                horizontal = Dimensions.small
            )
        ) {
            items(List(50) {}) {
                Card(
                    shape = MaterialTheme.shapes.medium,
                    elevation = 2.dp,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = Dimensions.verySmall)
                ) {
                    Text("Card")
                }
            }
        }
    }
a

Andrey Kulikov

02/05/2022, 12:25 AM
set Modifier.zIndex(1f) on your header
m

Marcin Wisniowski

02/05/2022, 1:14 PM
Thank you! I knew it must be something simple. 😄
c

Colton Idle

02/07/2022, 5:53 PM
oooh. I wonder if I can use zIndex on a modal bottom sheet so that it appears on top of my bottom nav bar. TIL about zindex. thanks Andrey
2 Views