[SOLVED] Is it correct behavior that the shadow of the Card is cut off at the top edge? You might ha...

# compose

[Lilly]

[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.

Column(modifier = Modifier
    .padding(24.dp)
    .fillMaxSize()
    .verticalScroll() // this causes the clipping
) {
    Card(elevation = 16.dp) {}
}

[bohregard]

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.

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

[bohregard]

This is on a phone running Android 12 using compose version 1.1.1

[Lilly]

@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.

[Lilly]

I have adjusted my initial post

[bohregard]

So it’s an issue of modifier order then

[bohregard]

[bohregard]

you want your vertical scroll modifier to come before the padding modifier since they apply in the order you write them

[bohregard]

Moving that up should fix that issue

[Lilly]

You are an awesome cat bohregard <3

[bohregard]

cat on keyboard