Hey everyone, I was trying out compose-web and it seems like the behaviour is a bit different as com...

# compose-web

[Aditya Wasan]

Hey everyone, I was trying out compose-web and it seems like the behaviour is a bit different as compared to the jvm.

E.g, this code did not align the two Text composables in a column. Just wanted to know if it's a bug or intended behavior.

Column {
  Text("Hello")
  Text("Compose")
}

[Aditya Wasan]

P.S. I don't have a web background so it can totally be my lack of web knowledge. Sorry if it's a stupid question.

[Oleksandr Karpovich [JB]]

looks like a bug
cc @[JB] Shagen

[[JB] Shagen]

@Aditya Wasan there are no stupid questions but there are some stupid implementors of widget API ) it's a bug and it turns out that widget API should be improved in many aspects so we are working on noticeable update - however this update won't be released tomorrow (we are releasing each Tuesday)

[darkmoon_uk]

Just encountered this; and on a Tuesday, 😉 🙏

[darkmoon_uk]

This is still broken in 0.5.0-build222 release 😢

[louiscad]

Is there an open issue to follow this particular issue?

[louiscad]

Ok, I found the culprit, and an easy fix:
The Text(…) composable seems to be added as bare text, being effectively concatenated in the DOM.
To fix that, you need to wrap the Text(…) into something, like a plain Box { … }. That will ensure the text passed to Text(…) is inside an html element and treated individually in the DOM.

FYI, the same behavior happens when Column is replaced with Div. For Div, it's less suprising since it's the expected behavior of the DOM, so I agree that Column or Text should get a solution for that at some point.

[louiscad]

I found that the Box { … } workaround doesn't work for Row { … }, that said.
Does anyone know how to make an equivalent on my own?
Also, should I open an issue for that one?

[louiscad]

Using Div({ style { display(DisplayStyle.Flex) } }) { … } in place Row { … } seems to work.

[Aditya Wasan]

For Column we can do the same, by just adding FlexDirection.Column

@Composable
fun CustomColumn(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
  Div({
    style {
      display(DisplayStyle.Flex)
      flexDirection(FlexDirection.Column)
    }
  }) {
    content()
  }
}