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

Learn
1

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:

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:

<!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

2

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

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

Hope this helps.

3

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!

4

Thinking more but this, if you “mount” Elm directly on main you can avoid to add CSS:
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. :slight_smile:

1 Like
5

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!

6

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