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

Lilly

04/23/2022, 8:36 PM
[SOLVED] Is it correct behavior that the shadow of the Card is cut off at the top edge? You might have to zoom-in to notice it.
Copy code
Column(modifier = Modifier
    .padding(24.dp)
    .fillMaxSize()
    .verticalScroll() // this causes the clipping
) {
    Card(elevation = 16.dp) {}
}
b

bohregard

04/24/2022, 12:24 AM
It looks like it’s clipping to the padding of the parent? I tried to replicate it with a fresh project but I couldn’t get it to repo.
Copy code
setContent {
    CardTestTheme {
        // A surface container using the 'background' color from the theme
        Surface(
            modifier = Modifier.fillMaxSize(),
            color = MaterialTheme.colors.background
        ) {
            Column(modifier = Modifier.padding(24.dp).fillMaxSize()) {
                Card(elevation = 16.dp) {
                    Box(modifier = Modifier.padding(12.dp)) {
                        Text(
                            style = MaterialTheme.typography.h5,
                            text = "Connection and Communication"
                        )
                    }
                }
            }
        }
    }
}
This is on a phone running Android 12 using compose version 1.1.1
l

Lilly

04/24/2022, 12:42 AM
@bohregard Thanks for your investigation. I missed something. Can you add .
verticalScroll(rememberScrollState())
to the parent Container. I just figured out that it only happens when this Modifier is set.
I have adjusted my initial post
b

bohregard

04/24/2022, 12:45 AM
So it’s an issue of modifier order then
you want your vertical scroll modifier to come before the padding modifier since they apply in the order you write them
Moving that up should fix that issue
l

Lilly

04/24/2022, 12:48 AM
You are an awesome cat bohregard <3
b

bohregard

04/24/2022, 12:49 AM
cat on keyboard
❤️ 1
5 Views