A modern programming language that makes developers happier.

kotlinlang

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

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.

<@URSU3J6LE> 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)

Just encountered this; and on a Tuesday, :wink: :pray:

This is still broken in `0.5.0-build222` release :cry:

Is there an open issue to follow this particular issue?

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.

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?

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

For `Column` we can do the same, by just adding `FlexDirection.Column`
```@Composable
fun CustomColumn(modifier: Modifier = Modifier, content: @Composable () -&gt; Unit) {
  Div({
    style {
      display(DisplayStyle.Flex)
      flexDirection(FlexDirection.Column)
    }
  }) {
    content()
  }
}```