A modern programming language that makes developers happier.

kotlinlang

I have this Box that stretches/scales on the Y axis. My problem is that the contents within the box are clipped unless I add padding even though I have clip=false.

```Box(
      modifier.fillMaxWidth().graphicsLayer {
        scaleY = 1000f
        clip = false
      },```
Is there a way to prevent this clipping? I thought compose didn't clip by default? Even if it did, I thought clipToBounds() would allow me to pass in "false" but it does not.

Is it intentional to scale by 1000x here?

I mean eventually you will get clipped by the bounds of the display here :slightly_smiling_face: scaleY will only scale in the vertical direction and leave the horizontal contents unscaled. So it seems like this is WAI. Do you have a screenshot of what you are trying to build?

The scale was only an example, because what I'm actually doing is rotation, but that seemed a bit harder to put into a few lines of code as an example. Let me post what I'm actually doing.

So I have basically this creditCard composable that I can flip when clicking on it. It makes for a cool effect, but it clips the top and bottom when its rotating.

```Box(
    modifier.fillMaxWidth().graphicsLayer {
      rotationY = rotation
      clip = false
      cameraDistance = 4 * density
    },
    contentAlignment = Alignment.Center) {
  MyCreditCardComposable(```


I stole this from here. which contains a gif of it CLIPPING!

<https://kotlinlang.slack.com/archives/CJLTWPH7S/p1631133258057000?thread_ts=1631111419.019000&amp;cid=CJLTWPH7S>

I think you will need to adjust the camera distance because the card is technically extending behind the "camera" here which is causing the clipping behavior you are seeing

From the camera distance docs here:

``` it is recommended to always use a camera distance that's greater than the height (X axis rotation) or the width (Y axis rotation) of this view.```

Hm. I just copied the code from the credit card sample above, but would that allow me to actually have a view directly under the credit card?

Basically, right now I can get around the cropping if I add padding manually to the bottom of the credit card, but that prevents me from putting something directly beneath the credit card, and then when I click the card it would flip and during the animation the card would be slightly on top of the content below it.

I don't think you need padding here I think the camera distance needs to be set to the width of the card itself instead of `4*density`

Plus the rotation is only applied to that graphicsLayer so you can still have content underneath it as a sibling composable in a box or other composable container

hm. Do I just use boxWithConstraints to get the width?

Tried with boxWithConstraints and same issue

```Column(horizontalAlignment = Alignment.CenterHorizontally) {
  BoxWithConstraints() {
    val boxScope = this
    MyCreditCard(
        modifier =
            Modifier
                .graphicsLayer {
                  rotationX = bottomSheetProgress.value * 20
                  cameraDistance = boxScope.maxWidth.value
                })
  }
  Box(modifier = Modifier.background(Color.Green).size(100.dp)) {
    //
  }
}```
