A modern programming language that makes developers happier.

kotlinlang

image.png

How to give this kind of Starting Border to a view in compose , the front Border height depends on the contents on the right?

Tried using IntrinsicSize.Max but didn't work,
Ended up using something like:-

A better solution would be:
```Card(
    modifier = Modifier
    .border(width = 4.dp, color = MarrowTheme.colors.onSurfaceBlue)
    .padding(start = 4.dp)
    .fillMaxWidth()
) {
   // card content...
}```
your current solution is considered an anti-pattern called "Recomposition loop" because it wastes at least 1 frame.
Read more about it in the documentation: <https://developer.android.com/jetpack/compose/phases#recomp-loop>

I get it but given solution applies border all around , i need to only apply it at the start.

I would try having this as a normal item inside the card instead of a border. Wouldn’t this work just by itself?
```Card() {
  Row(fillMaxSize) {
    Box(fillMaxHeight.width(4.dp).background(Color.Blue)
    YourCardContent()
  }
}```

<@U01KL7UTJ1M> Oh sorry, this is because `border` is applying some paddings/offsets internally, I think if you want one side border, you would do it manually using one of `drawX` modifiers:
```val borderColor = MarrowTheme.colors.onSurfaceBlue
val borderWidth = with(LocalDensity.current) {
    4.dp.toPx()
}
Card(
    modifier = modifier
    .fillMaxSize()
    .drawWithCache {
         onDrawBehind {
             drawRect(color = borderColor, size = Size(width = borderWidth, size.height))
         }
    }
    .padding(start = 4.dp)
    .fillMaxWidth()
) {
   // card content...
}```
haven't tested it, but I think it should achieve the desired result

<@U010JQZ3FRC> I agree, I think it would also work

Yes, but it does mess with the paddings potentially if you aren't careful to consider the extra 4dp. I like your drawBehind approach more for that reason.

<@U010JQZ3FRC> well if u give fill max height, it takes the entire layout but the same combination works in XML, just have parent with wrap_content and child with match_parent

<@U035EC182NB> That solution works and i like the approach, Thanks