Compose elements with fillMaxWidth() are cut on the edge

[admund]

Please complete the following information:

• Library Version: 1.6.4
• Affected Device: Oppo A5

Describe the Bug:

My ballonContent

@Composable
fun BalloonContent() {
  Column {
    Text(text = "description")
    Text(
      modifier = Modifier
        .fillMaxWidth()
        .padding(end = 0.dp),
      text = "fillMaxWidth",
      textAlign = TextAlign.End
    )
    Box(
      modifier = Modifier
        .fillMaxWidth()
        .padding(end = 0.dp),
      contentAlignment = Alignment.CenterEnd
    ) {
      Text(text = "centered end")
    }
    Box(
      modifier = Modifier.fillMaxWidth(),
      contentAlignment = Alignment.CenterEnd
    ) {
      Button(onClick = { }) {
        Text(text = "button")
      }
    }
  }
}

Looks like that:

I used a sample app from this lib.

It looks like a Compose issue, but maybe somebody found a workaround for that (different than adding padding on the end).

I have a similar problem with our production app but with height. Not able to reproduce it in the sample app.

Expected Behavior:

Compose elements are not cut on edge 😏

[thproflord]

Devices: Samsung s20ultra and redmi note 10s
Getting similar results with long texts

maybe somethiing I'm missing?

`
val builder = rememberBalloonBuilder {
setArrowSize(20)
setWidthRatio(0.8f)
setHeight(BalloonSizeSpec.WRAP)
setArrowOrientation(ArrowOrientation.TOP)
setArrowPositionRules(ArrowPositionRules.ALIGN_ANCHOR)
setPadding(12)
setMarginHorizontal(12)
setCornerRadius(8f)
setBackgroundColor(Color.White)
setIsVisibleOverlay(true)
setOverlayShape(BalloonOverlayCircle(radius = 48f))
setOverlayColor(lc.getColor(R.color.ballonOverlay))
}

Balloon(
    builder = builder,
    onBalloonWindowInitialized = { balloonWindow = it },
    balloonContent = {
        Column (modifier = Modifier.padding(8.dp)){
            Text(
                text = LanguageManager.getString(
                                        LanguageManager.languageManager?.calendar?.main?.tooltip?.title,
                                        lc.resources.getString(R.string.calendar_tooltip_title)),
                fontSize = 16.sp,
                color =  Color.Black,
                fontFamily = FontFamily(
                    Font(R.font.gds_bold)
                )
            )
             Text(
                    text = LanguageManager.getString(
                                        LanguageManager.languageManager?.calendar?.main?.tooltip?.body_singular,
                                        lc.resources.getString(R.string.calendar_tooltip_body_singular)),
                     fontSize = 16.sp,
                     color =  Color.Black,
                     fontFamily = FontFamily(
                         Font(R.font.gds_regular)
                     )
              )
           }

  },
) 

`

[thproflord]

same problem with the height

[yigitozgumus]

Hello, @thproflord . I came across the same issue earlier. After looking through the codebase, I saw that elevation value is also added to the overall padding of Balloon. I guess to make the shadow visible on all sides, padding operations takes elevation into the consideration.

private fun initializeBalloonContent() {
  val paddingSize = builder.arrowSize - SIZE_ARROW_BOUNDARY
  val elevation = builder.elevation.toInt()
  with(binding.balloonContent) {
    when (builder.arrowOrientation) {
      ArrowOrientation.START -> setPadding(paddingSize, elevation, paddingSize, elevation)
      ArrowOrientation.END -> setPadding(paddingSize, elevation, paddingSize, elevation)
      ArrowOrientation.TOP ->
        setPadding(elevation, paddingSize, elevation, paddingSize.coerceAtLeast(elevation))

      ArrowOrientation.BOTTOM ->
        setPadding(elevation, paddingSize, elevation, paddingSize.coerceAtLeast(elevation))
    }
  }
}

so setting elevation to 0 should make the balloonContent cover the whole width of the screen.

[thproflord]

hello @yigitozgumus just trying your suggestion, worked like a charm. Fixed Width and Height issues, so thank you su much.
I didn't set the elevation so it was taking de default one, now with 0 it's perfect

[skydoves]

Hi everyone, the new release 1.6.7 has fixed this issue. Thank you so much for figuring out the solution, @yigitozgumus!

[maggud]

@skydoves after this fix I noticed that the elevation is now cropped if you add margin. I can't give a good sample right now, but I would think it might be worth investigating if the elevation padding should be moved somewhere else, like to the balloonWrapper, instead of just setting it to 0, because setting it to 0 will leave no room for elevation shadows :)