skydoves / Balloon

:balloon: Modernized and sophisticated tooltips, fully customizable with an arrow and animations for Android.

Home Page:https://skydoves.github.io/libraries/balloon/html/balloon/com.skydoves.balloon/index.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Compose elements with `fillMaxWidth()` are cut on the edge

admund opened this issue · comments

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:
Screenshot 2024-01-30 at 09 38 10
Screenshot 2024-01-30 at 09 38 25

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.
Monosnap Samsung Galaxy J7 Prime v8 1 2024-01-29 10-31-27

Expected Behavior:

Compose elements are not cut on edge 😏

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

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

  },
) 

`

same problem with the height