elm-ui | What if you never had to write CSS | Frontend Framework library

For parsing a line breaks like \n from your input is already answered here.

Though because br [] [] is not part of Elm-Ui, and Elm-Ui does not have a similar attribute, the solution is to pipe the line break through Element.html.

For example:

This is surprisingly involved and part of it is I suspect that a proper transition library specifically designed around elm-ui is (AFAICT) still missing.

The basics steps are like this:

1. Define properties for the start and mouseOver states.
2. Figure out which properties these correspond to in elm-simple-animation.
3. Add a transition for those.

This was answered over on slack by a generous hero. Just moving the answer over here so that it is available to others.

The solution is to use htmlAttribute in the el just like you would centerX, spacing ~~, etc!

Like you already pointed out, mouseOver requires a Attr decorative msg. It uses CSS for the hover (hence the limitations), which takes care of applying the style on mouse over and clears it on mouse out.

For the general case, we have to detect mouse over/out ourselves, using Element.Events. We also need to keep track of this state in our Model. Then we can apply the Font.strike attribute conditionally depending on the model.

We can listen for these events on an Element.el

If I understand your question correctly, the problem you're trying to solve is clicking outside the modal to close it. Decoding the event object to get information about the DOM is a bit of a hack in Elm – I think you're right to try to avoid it, unless necessary. One way to achieve the same thing is to add a click event handler with stop propagation to your modal contents – this stops the click event from firing on the container when it originates from within the modal.

I've put your example code in an Ellie and made some small changes: https://ellie-app.com/b9gDPHgtz2ca1

This solution uses Html.Events.stopPropagationOn, which is like on but does a call to event.stopPropagation(). This function does require you to supply a decoder, so I'm afraid you can't get away from importing Json.Decode, but we are using the simplest possible decoder – Decode.succeed – and only to satisfy the parameters of the function.

I've added a NoOp variant to Msg, as there is nothing to do when the modal is clicked; simply attaching this event handler stops the Hide event from firing when we don't want it to.

This Github issue is useful for this problem. I'm afraid you will have to use some CSS (unless I'm missing something). I've found this before with elm-ui; every now and then it can't quite do what you want and you need a bit of CSS.

This works for me (taken from the post by AlienKevin in the link above). You need to set "marginLeft" and "marginRight" to "auto".