Elm Language viewInput text new line

Question

I am new to to Elm. I would like to have each viewInput text box on a new line.

view : Model -> Html Msg
view model =
  div []
    [ viewInput "text" "Address" model.address Address
    , viewInput "text" "Address2" model.address2 Address2 
    , viewInput "text" "City" model.city City
    , viewInput "text" "State" model.state State
    , viewInput "text" "Zipcode" model.zipcode Zipcode

I have tried to use the break tag but can't seem to figure it out and the error messages are not helping.

Thank you

Answer 1

Since input is an inline element by default, you need to wrap it in a block element to display it on a separate line. div tag can be used:

view : Model -> Html Msg
view model =
    div []
        [ div [] [ viewInput "text" "Address" model.address Address ]
        , div [] [ viewInput "text" "Address2" model.address2 Address2 ]
        , div [] [ viewInput "text" "City" model.city City ]
        , div [] [ viewInput "text" "State" model.state State ]
        , div [] [ viewInput "text" "Zipcode" model.zipcode Zipcode ]
        ]

Or just put this div tag in viewInput implementation.

Another option is to change it via CSS.

Answer 2

use the break tag like this

view : Model -> Html Msg
view model =
  div []
    [ viewInput "text" "Address" model.address Address
    , br [] []
    , viewInput "text" "Address2" model.address2 Address2 
    , br [] []
  ]

Answer 3

You could change viewInput to return List (Html Msg), and then include br [] [] in returned list:

view : Model -> Html Msg
view model =
  div []
    viewInput "text" "Address" model.address Address
    ++ viewInput "text" "Address2" model.address2 Address2 
    ++ viewInput "text" "City" model.city City
    ++ viewInput "text" "State" model.state State
    ++ viewInput "text" "Zipcode" model.zipcode Zipcode
  ]

viewInput: ... -> List (Html Msg)
viewInput ... =
  [ ...
  , br [] []
  ]