Wrapping of Elm-UI paragraph containing both Elm-UI elements and Html elements

Learn
1

When combining Elm-UI elements and Html elements inside an Elm-UI paragraph, the paragraph wrapping does not work as expected.

In this Ellie example I’ve tried these four approaches:

A) Elm-UI only elements (works)
B) Mixing Elm-UI elements and Html elements (does not work)
C) Mixing Elm-UI elements and Html elements but wrapping Html in sized Elm-UI elements (works)
D) Mixing Elm-UI elements and Html elements and setting flex/wrap attributes on the Elm-UI paragraph (works)

In B, is the elements not wrapping correctly expected behaviour?

In general, approach C cannot be used since I may not know the size of the Html element. This leaves me with approach D. Is approach D the best way to solve this or is there a better, possible Elm-UI native, way?

2

I think you are looking for Element.wrappedRow.

https://ellie-app.com/szvtwG3thLma1

Element.paragraph is for paragraphs of text.

3

Great, thank you!

Since the paragraph function takes List (Element msg) as argument I (wrongly) thought it would work with any element. I’m happy to learn about wrappendRow :slight_smile: