Elm-ui: can only get my "code blocks" to fill the entire width or go off screen

Learn
1

I am trying to incorporate some nice code blocks:
https://ellie-app.com/f8d8LSYn4sta1
but the problem is that I can only get the code block to span the entire width of the page and have nice scrollbars on overflow or can have it nicely end after the code but then go off the page.

am I missing something obvious?

2

Are you looking for Element.paragraph maybe? (It’s a bit difficult to understand what you want the styling to look like.)

3

I want the code block to be the minimal size required (like the 3rd codeblock) but if the code is too long for the page I want there to be a scrollbar (like the 2nd). (and it not going off the page like the 4th one)

5

Some ideas:

  1. Maybe try shrink |> maximum pageWidth where page width comes from an onResize subscription.

  2. Play around with the css. Provide a code block class. (Css is an escape hatch for elm-ui just like js is an escape hatch for Elm)

6

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