Hello all. I have a checkbox in a parent view, the parent view is padded on start by 16dp. The che...

# compose

[Billy Newman]

Hello all. I have a checkbox in a parent view, the parent view is padded on start by 16dp. The checkbox aligns with that padding. However the ripple on click of the checkbox is clipped on the left side. Struggling to figure out how to unbound the checkbox ripple. Any ideas?

[Billy Newman]

Tried this with no luck:

modifier = Modifier
  .indication(interactionSource = MutableInteractionSource(), indication = rememberRipple(bounded = false))

[Artur Schwarz]

Could you post a vid/gif of what exactly your problem is?

[Billy Newman]

[Artur Schwarz]

I guess giving the checkbox a padding is inevitable here

[Artur Schwarz]

does the parent view need to have a padding?

[Billy Newman]

I mean I suppose I can remove the parent view padding. However its a vertical “list” of components that are all padded 16dp. Meaning I would need to add individual padding to each child element. Is this really the right way?

[Artur Schwarz]

I’ve quickly implemented a checkbox to see what happens in my case. It seems that there’s something wrong with your paddings. In the vid you can see a Column with a padding, the checkbox is inside that column. Ripple effect works fine

Screen Recording 2021-05-17 at 16.27.33.mov

[Artur Schwarz]

Feel free to share the code, i’ll take a look 🙂

[Billy Newman]

Thanks, that makes sense, going up my hierarchy to see if I can figure out where I went wrong.

[Billy Newman]

I had the check box in a Row, checkbox, then label:

Row(Modifier.fillMaxWidth()) {
  Checkbox(
    checked = value,
    onCheckedChange = { value = it }
  )

  Text(text = "Checkbox")
}

.fillMaxWidth() fixed it

[Artur Schwarz]

👍🏻 Glad you've found the issue 😊