width of paragraph in Elm

Question

Trying to make paragraph a certain width but the paragraph runs over. Why does Elm ignore me?

That width must be an integer, so I gave it the width in pixels.

import Html exposing (..)
import Html.Attributes exposing (..)


info : String
info = "Ports must be careful about what values are allowed through. Elm is statically typed, so each port is fitted with some border protection code that ensures that type errors are kept out. Ports also do some conversions so that you get nice colloquial data structures in both Elm and JS."

main = p [ Html.Attributes.width 500] [ text info ]

Elm-Reactor just compiles it to a <p> ... </p> with no attributes.

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

Use "style" from Html.Attributes

style [ ("width", "100px") ]

According to the docs the "Html.Attributes.width" function is not for paragraphs.

width : Int -> Attribute msg

Declare the width of a canvas, embed, iframe, img, input, object, or video.

http://package.elm-lang.org/packages/elm-lang/html/1.0.0/Html-Attributes#width

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 05 '16 at 06:19

farmio

8,883
3
13
17

OK... do you know why `
` is treated differently?
– john mangual Jun 05 '16 at 12:06
1

This is standard Html: in Html, `
` elements do not have a `width = ` attribute. They can have a `style = ` attribute. And inside the style, you can set the width (and any other css/ style attribute).
– wintvelt Jun 09 '16 at 07:18

score 4 · Answer 2 · edited Jun 20 '20 at 09:12

You are confusing width HTML Attribute with CSS property with the same name.

width

For the elements listed here, this establishes the element's width.

Note: For all other instances, such as , this is a legacy attribute, in which case the CSS width property should be used instead

<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

CSS property

p [ style [ ("width", "100px") ] ] [ text "Hello World!" ]
-- <p style="width: 100px">Hello World</p>

HTML Attribute

iframe [ width 100 ] []
-- <iframe width="100px"></iframe>

width of paragraph in Elm

2 Answers2