# HELP: elm-ui doesn't cover the whole screen

**URL:** <https://discourse.elm-lang.org/t/help-elm-ui-doesnt-cover-the-whole-screen/9852>\
**Category:** Learn\
**Created:** [June 26, 2024, 3:36am UTC](https://discourse.elm-lang.org/t/help-elm-ui-doesnt-cover-the-whole-screen/9852 "2024-06-26T03:36:24Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eli](https://avatars.discourse-cdn.com/v4/letter/e/a9a28c/32.png) [@Eli](https://discourse.elm-lang.org/u/Eli)\
**Post date:** [June 26, 2024, 3:36am UTC](https://discourse.elm-lang.org/t/help-elm-ui-doesnt-cover-the-whole-screen/9852/1 "2024-06-26T03:36:24Z")

</div>

Hi. I’m learning Elm and elm-ui and I’m struggling with something pretty basic. I have a pretty minimal example that displays a centered string correctly but only when I use elm reactor. When instead I compile the js manually and use it in my html file, it only covers as much as it needs to cover vertically. For the life of my I haven’t figured out why.

Here’s the elm code:

```auto
module Main exposing (..)

import Element exposing (..)
import Element.Border as Border
import Element.Font as Font
import Html exposing (Html)

menu : Element msg
menu =
    row
        [ width fill
        , padding 20
        , spacing 20
        ]
        [ el
            -- "logo" element
            [ width <| px 80
            , height <| px 40
            , Border.width 2
            , Border.rounded 6
            , Border.color <| rgb255 0xc0 0xc0 0xc0
            ]
            none
        , el [alignRight] <| text "Services"
        , el [alignRight] <| text "About"
        , el [alignRight] <| text "Contact"
        ]

main : Html msg
main =
    layout
        [width fill, height fill, inFront menu]
        <| el [centerX, centerY, padding 50]
            <| paragraph
                [Font.size 48, Font.center]
                [ text "Welcome to "
                , el [Font.italic] <| text "this"
                , text ""
                ]

```

and here’s the html:

```auto
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Nocturna</title>
  <style>
  </style>
</head>

<body>
  <main>
    <div id="elm"></div>
  </main>
  <script src="elm.js"></script>
  <script>
    var app = Elm.Main.init({
      node: document.getElementById('elm')
    });
  </script>
</body>

</html>

```

Any help would be very much appreciated

---

<div class="post-metadata">

**Author:** ![passiomatic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/passiomatic/32/1250_2.png) [@passiomatic](https://discourse.elm-lang.org/u/passiomatic)\
**Post date:** [June 26, 2024, 10:27am UTC](https://discourse.elm-lang.org/t/help-elm-ui-doesnt-cover-the-whole-screen/9852/2 "2024-06-26T10:27:15Z")

</div>

When you compile the app by hand together with the final HTML page the browser by default will insert it into `main`, as expected. However, the way HTML default layout works is that the `main` element will occupy as little vertical space as possibile.

To fix this, trigger flex box on `body`, this will make `main` - its only direct child - the stretch vertically and occupy all the vertical space that body let it to take.

Example:  
[https://ellie-app.com/rwNfR7wQDxca1](https://ellie-app.com/rwNfR7wQDxca1)

Note the Elm-ui uses flex box under the hood by default.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![Eli](https://avatars.discourse-cdn.com/v4/letter/e/a9a28c/32.png) [@Eli](https://discourse.elm-lang.org/u/Eli)\
**Post date:** [June 26, 2024, 3:43pm UTC](https://discourse.elm-lang.org/t/help-elm-ui-doesnt-cover-the-whole-screen/9852/3 "2024-06-26T15:43:27Z")

</div>

Hi and thank you for clarifying it so well. I assumed with elm-ui I wouldn’t have to learn CSS at all. I see the situation is more nuanced than that!

---

<div class="post-metadata">

**Author:** ![passiomatic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/passiomatic/32/1250_2.png) [@passiomatic](https://discourse.elm-lang.org/u/passiomatic)\
**Post date:** [June 26, 2024, 3:48pm UTC](https://discourse.elm-lang.org/t/help-elm-ui-doesnt-cover-the-whole-screen/9852/4 "2024-06-26T15:48:16Z")

</div>

Thinking more but this, if you “mount” Elm directly on `main` you can avoid to add CSS:  
[https://ellie-app.com/rwT7JM8gXZVa1](https://ellie-app.com/rwT7JM8gXZVa1)

Because Elm-UI adds a few styles to `main` to extend it vertically.

On a general note: it helps to have some basic knowledge of what’s going on in the page. 🙂

---

<div class="post-metadata">

**Author:** ![Eli](https://avatars.discourse-cdn.com/v4/letter/e/a9a28c/32.png) [@Eli](https://discourse.elm-lang.org/u/Eli)\
**Post date:** [June 28, 2024, 10:52pm UTC](https://discourse.elm-lang.org/t/help-elm-ui-doesnt-cover-the-whole-screen/9852/5 "2024-06-28T22:52:04Z")

</div>

Hi Andrea. I just wanted to report that your approaches worked for me.

> Because Elm-UI adds a few styles to `main` to extend it vertically.

Interesting!

> it helps to have some basic knowledge of what’s going on in the page

I can see that. I barely have enough time to focus on learning elm right now but I’ll make sure to find the time to learn the basics of CSS and HTML to the extent they can help complement my understanding of elm-ui.

Thanks again for the clear explanations!

---

<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:** [July 8, 2024, 10:52pm UTC](https://discourse.elm-lang.org/t/help-elm-ui-doesnt-cover-the-whole-screen/9852/6 "2024-07-08T22:52:18Z")

</div>

Closed on July 8, 2024, 10:52pm UTC

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