Can't get left/right shadow on my card to show up ...

# compose

[Colton Idle]

Can't get left/right shadow on my card to show up in a simple Surface + Column. I'm missing something simple I assume?

Short code snippet in 🧵

[Colton Idle]

Surface(
    color = MaterialTheme.colors.surface,
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
) {
    Column(
        Modifier            .verticalScroll(rememberScrollState())
    ) {
        Card(elevation = 8.dp, backgroundColor = MaterialTheme.colors.surface) {
            Text(text = "My card")
        }

[Andrey Kulikov]

the upper surface is also clipping. and it clips the shadow in your case. you probably want to re-arrange it a bit to achieve the look you want

[Colton Idle]

@Andrey Kulikov hm. I thought compose didn't clip. I've tried rearranging as I figured it was part of the problem, but still no dice. I'm probably missing something simple here.

[Andrey Kulikov]

Compose is not clipping. Surface from Material is clipping, because it represents something like a new layer - piece of material. if you don’t need this behaviour you can not use it and apply a background with just a modifier

[Andrey Kulikov]

Box(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp)
        .background(MaterialTheme.colors.surface)
)

[Colton Idle]

Interesting. Trying to wrap my head around "Surface is clipping". I guess I'm just used to seeing a Scaffold with a TopAppBar and a Surface and I don't even know why I used a Surface in the first place?

[Andrey Kulikov]

please read the documentation for Surface, it explains the purpose of the component

[Colton Idle]

@Andrey Kulikov I'm going to do that. Thank you. Sorry for the stupid mistake

[Andrey Kulikov]

don’t worry, it is not stupid at all!

[Colton Idle]

Okay. So I changed to a box, and that still didn't help my issue unfortunately.

I had to move padding inside the column, below the scroll modifiers.

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(MaterialTheme.colors.surface)
) {
    Column(
        Modifier
            .verticalScroll(rememberScrollState())
            .padding(16.dp)

I'm going to try to simplify at this point and just have my scaffold hold a Column directly. I think that should work too, and it'll cut out the Box being needed.

[Andrey Kulikov]

right. it wasn’t only Surface who is clipping. Modifier.verticalScroll() is also clipping. otherwise we would see the parts of the item which is scrolled out. so your solutions is correct. now you add a padding for a content after clipping

[Colton Idle]

@Andrey Kulikov this is all making a lot more sense. Thank you so much for your time