Basic CSS question

Learn
1

Hi, I’m totally new to Elm and I’m enjoying it so far.

I’m trying to draw something with svg and I need to make html and body to fill up the entire window (width: 100%; height: 100%;).

From what I understood by searching the web it seems that Elm discourages external CSS files and instead suggests using inline styles? I’m willing to give it a try, but I can’t figure out how to apply an inline style to the html and body tags in this case, since they are already rendered by the time my code has any effect.

2

Hi Miha and welcome to Elm.

Elm doesn’t discourage external CSS. I actually prefer this way of handling CSS. So, feel free to solve this using an external CSS.

For testing purposes you can also add an Html.node "style" element with the needed CSS.

Here is how:
https://ellie-app.com/67vmrPtcygwa1

3

@pdamoc Thanks, that works a treat!

4

External CSS is fine and not discouraged at all.

To make body fill up the entire window you’d write the following CSS:

body {
  margin: 0;
  height: 100vh;
}

By default body has margin so we remove it. Then, we make the height of the body equal to 100% the height of the viewport. Read about viewport-percentage lengths here.

N.B. You don’t need to set the width since it already expands to fill the width of the viewport.

For a concrete example, you can look at how it’s done in this app, here.

1 Like
5

Oh and for inline styles you can use the existing style attribute.

6

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