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

**URL:** <https://discourse.elm-lang.org/t/elm-ui-can-only-get-my-code-blocks-to-fill-the-entire-width-or-go-off-screen/7712>\
**Category:** Learn\
**Created:** [August 28, 2021, 9:10pm UTC](https://discourse.elm-lang.org/t/elm-ui-can-only-get-my-code-blocks-to-fill-the-entire-width-or-go-off-screen/7712 "2021-08-28T21:10:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sijmen\_v\_b](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sijmen_v_b/32/4252_2.png) [@sijmen\_v\_b](https://discourse.elm-lang.org/u/sijmen_v_b)\
**Post date:** [August 28, 2021, 9:10pm UTC](https://discourse.elm-lang.org/t/elm-ui-can-only-get-my-code-blocks-to-fill-the-entire-width-or-go-off-screen/7712/1 "2021-08-28T21:10:55Z")

</div>

I am trying to incorporate some nice code blocks:  
[https://ellie-app.com/f8d8LSYn4sta1](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?

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [August 29, 2021, 9:32am UTC](https://discourse.elm-lang.org/t/elm-ui-can-only-get-my-code-blocks-to-fill-the-entire-width-or-go-off-screen/7712/2 "2021-08-29T09:32:05Z")

</div>

Are you looking for [Element.paragraph](https://elm.dmy.fr/packages/mdgriffith/elm-ui/latest/Element#paragraph) maybe? (It’s a bit difficult to understand what you _want_ the styling to look like.)

---

<div class="post-metadata">

**Author:** ![sijmen\_v\_b](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/sijmen_v_b/32/4252_2.png) [@sijmen\_v\_b](https://discourse.elm-lang.org/u/sijmen_v_b)\
**Post date:** [August 29, 2021, 7:49pm UTC](https://discourse.elm-lang.org/t/elm-ui-can-only-get-my-code-blocks-to-fill-the-entire-width-or-go-off-screen/7712/3 "2021-08-29T19:49:36Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Nduati\_Kuria](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nduati_kuria/32/3733_2.png) [@Nduati\_Kuria](https://discourse.elm-lang.org/u/Nduati_Kuria)\
**Post date:** [September 3, 2021, 6:40am UTC](https://discourse.elm-lang.org/t/elm-ui-can-only-get-my-code-blocks-to-fill-the-entire-width-or-go-off-screen/7712/5 "2021-09-03T06:40:00Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 13, 2021, 6:40am UTC](https://discourse.elm-lang.org/t/elm-ui-can-only-get-my-code-blocks-to-fill-the-entire-width-or-go-off-screen/7712/6 "2021-09-13T06:40:53Z")

</div>

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