Embed Elm-UI into HTML Page

Learn
1

Hi Guys,

is it possible to embed an Elm-UI “widget” into a larger HTML page?

Thanks,

John

2

Yes, you can convert your Element msg into an Html msg using the Element.layout function.

You can also convert the other way, embedding HTML inside an element via the Element.html function. This means you can have HTML inside an element inside HTML inside an element …

You can see an example in this old gamejam project. I have an elm/html button inside an elm-ui row inside an elm/html div.

1 Like
3

Perfect! Thanks.

I am getting back to Elm after a long time out. Still my favourite language - Elm-UI is such a great lib also : )

1 Like
4

OK, I noticed an issue…

On Chrome the whole page is filled (I avoided “height fill”).

But Firefox render fine.

Hmm. Any more tips would be super helpful. Thanks!

5

OK, it looks like Elm owns it’s own div tag while running with Chrome

I.e. this does not work:

  <div >
     <div id="elm-app"  style="height: 500px;"></div>
  </div>

but this does:

  <div style="height: 500px;">
     <div id="elm-app" ></div>
  </div>
6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.