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
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 [] []
]
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.
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 [] []
]
Related
I have a dropdown which shows text as moredetails with a keyboard-down-arrow, on clicking it expands and i can see the required fields. What i am trying to achieve is once on clicking the button when the secondary field expands i want to change the text to 'less details', i am able to achieve till like on expansion the keyboard downarrow mark becomes keyboard up arrow mark.
this is my code
Html.span
[ Attributes.class "details" ]
[ Html.a
[ Attributes.href "#", Events.onClick (ExpandDetails tx.id)]
[ Html.text "More detail"
, Html.i
[ Attributes.class "material-icons" ]
[ if expanded then
Html.text "keyboard_arrow_up"
else
Html.text "keyboard_arrow_down"
]
]
]
i am able to make it till if expands show downarrow but along with it i need text to change from more details to less details and on clicking less details it should be back to more details.
If I'm understanding correctly, you could define both the button and text in a let expression before the dropdown code. Something like:
let
( dropdownButton, dropdownText ) =
if expanded then
( "keyboard_arrow_up", "Less details" )
else
( "keyboard_arrow_down", "More details" )
in
Html.span [ Attributes.class "details" ]
[ Html.a
[ Attributes.href "#"
, Events.onClick (ExpandDetails tx.id)
]
[ Html.text dropdownText
, Html.i [ Attributes.class "material-icons" ]
[ Html.text dropdownButton ]
]
]
Here's an alternative.
Move the link into a function that takes the Strings as arguments.
viewDetails : Tx -> Bool -> Html Msg
viewDetails tx expanded =
let
lessOrMoreLink =
if expanded then
viewExpandLink "Less" "keyboard_arrow_up"
else
viewExpandLink "More" "keyboard_arrow_down"
in
Html.span
[ Attributes.class "details" ]
[ lessOrMoreLink tx.id ]
viewExpandLink : String -> String -> Int -> Html Msg
viewExpandLink txt arrow id =
Html.a
[ Attributes.href "#"
, Events.onClick (ExpandDetails id)
]
[ Html.text (txt ++ " details")
, Html.i
[ Attributes.class "material-icons" ]
[ Html.text arrow ]
]
I have been trying several things and cannot work out how to style this Elm table with Bootstrap so it's striped. I am trying to use elm-bootstrap and have installed rundis/elm-bootstrap 4.1.0
Bootstrap.Table is currently unused:
module Players.List exposing (..)
import Html exposing (..)
import Html.Attributes exposing (class)
import Msgs exposing (Msg)
import Models exposing (Player)
import RemoteData exposing (WebData)
import Bootstrap.Table as Table
view : WebData (List Player) -> Html Msg
view response =
div []
[ nav
, maybeList response
]
nav : Html Msg
nav =
div [ class "clearfix mb2 white bg-black" ]
[ div [ class "left p2" ] [ text "Players" ] ]
maybeList : WebData (List Player) -> Html Msg
maybeList response =
case response of
RemoteData.NotAsked ->
text ""
RemoteData.Loading ->
text "Loading..."
RemoteData.Success players ->
list players
RemoteData.Failure error ->
text (toString error)
list : List Player -> Html Msg
list players =
div [ class "col-md-4" ]
[ table [ class "table table-striped" ]
[ thead []
[ tr []
[ th [] [ text "Id" ]
, th [] [ text "Initials" ]
, th [] [ text "Time" ]
, th [] [ text "Score" ]
]
]
, tbody [] (List.map playerRow players)
]
]
playerRow : Player -> Html Msg
playerRow player =
tr []
[ td [] [ text player.id ]
, td [] [ text player.initials ]
, td [] [ text (toString player.time) ]
, td [] [ text (toString player.score) ]
]
As this should be ultra simple I'm clearly missing something here. How can I make this table striped?
Your example uses HTML functions from Elm's HTML library but you're probably going to have a better time using the appropriate Bootstrap types and functions. For example, using the table options defined in the documentation, you could rewrite the view functions like this:
list : List Player -> Html msg
list players =
Table.table
{ options = [ Table.striped ]
, thead = Table.thead []
[ Table.tr []
[ Table.th [] [ text "Id" ]
, Table.th [] [ text "Initials" ]
, Table.th [] [ text "Time" ]
, Table.th [] [ text "Score" ]
]
]
, tbody = Table.tbody [] (List.map playerRow players)
}
playerRow : Player -> Table.Row msg
playerRow player =
Table.tr []
[ Table.td [] [ text player.id ]
, Table.td [] [ text player.initials ]
, Table.td [] [ text (Debug.toString player.time) ]
, Table.td [] [ text (Debug.toString player.score) ]
]
That will give you the right HTML but you may still need to import the Bootstrap styles. The documentation gives an example of including the stylesheet, which you could do in some wrapping function, for example:
import Bootstrap.Grid as Grid
import Bootstrap.Table as Table
import Bootstrap.CDN as CDN
view : Model -> Html Msg
view model =
Grid.container []
[ CDN.stylesheet -- creates an inline style node with the Bootstrap CSS
, Grid.row []
[ Grid.col []
[ list model.players ]
]
]
Here is a slimmed down Ellie example to play with.
I'm trying to make a content editable tag that uses enter to update the model.
My code is below, and here is a version that you can play around with on Ellie.
The on "blur" attribute works and updates the model when you click away. But I want to get the same 'update' functionality when an enter is pressed.
view : Model -> Html Msg
view model =
let
attrs =
[ contenteditable True
--, on "blur" (Json.map UpdateTitle targetTextContent)
, onInput2 UpdateTitle
, onEnter EnterPressed
, id "title"
, class "title"
]
in
div []
[ h1 attrs [ text model.existing ]
, text "Click above to start editing. Blur to save the value. The aim is to capture an <enter> and interpret that as a blur, i.e. to save the value and blur the field"
, p [] [ text <| "(" ++ model.existing ++ ")" ]
]
targetTextContent : Json.Decoder String
targetTextContent =
Json.at [ "target", "textContent" ] Json.string
onInput2 : (String -> msg) -> Attribute msg
onInput2 msgCreator =
on "input" (Json.map msgCreator targetTextContent)
onEnter : (Bool -> msg) -> Attribute msg
onEnter enterMsg =
onWithOptions "keydown"
{ stopPropagation = False
, preventDefault = False
}
(keyCode
|> Json.andThen
(\ch ->
let
_ =
Debug.log "on Enter" ch
in
Json.succeed (enterMsg <| ch == 13)
)
)
This code seems to be updating the model ok, but the DOM is getting messed up. For example if I enter enter after "blast" I see this
I tried switching to Html.Keyed and using "keydown" but it did not make any difference or just created different issues.
Solved! The key point is the filter function that uses Json.Decode.fail so that only <enter> is subject to preventDefault. See https://github.com/elm-lang/virtual-dom/issues/18#issuecomment-273403774 for the idea.
view : Model -> Html Msg
view model =
let
attrs =
[ contenteditable True
, on "blur" (Json.map UpdateTitle targetTextContent)
, onEnter EnterPressed
, id "title"
, class "title"
]
in
div []
[ h1 attrs [ text model.existing ]
, text "Click above to start editing. Blur to save the value. The aim is to capture an <enter> and interpret that as a blur, i.e. to save the value and blur the field"
, p [] [ text <| "(" ++ model.existing ++ ")" ]
]
targetTextContent : Json.Decoder String
targetTextContent =
Json.at [ "target", "textContent" ] Json.string
onEnter : msg -> Attribute msg
onEnter msg =
let
options =
{ defaultOptions | preventDefault = True }
filterKey code =
if code == 13 then
Json.succeed msg
else
Json.fail "ignored input"
decoder =
Html.Events.keyCode
|> Json.andThen filterKey
in
onWithOptions "keydown" options decoder
This seems to be set up correct, but it clearly is not and I cannot see where it's going wrong. I'm trying to loop over a "list of objects" and create a ul with lis for each item in the list and put those inside of a div. Ignore everything involving the ID. I have a feeling I'm not entirely sure how List.map returns.
type alias Product =
{ a : String
, b : String
, c : Int
, d : String
, e : String
}
type alias Model =
{ id : String
, products : List Product}
view : Model -> Html Msg
view model =
div []
[ input [ type' "text", onInput UpdateText ] []
, button [ type' "button", onClick GetProduct ] [ text "Search" ]
, br [] []
, code [] [ text (toString model.products) ]
, div [] [ renderProducts model.products ]
]
renderProduct product =
let
children =
[ li [] [ text product.a ]
, li [] [ text product.b ]
, li [] [ text (toString product.c) ]
, li [] [ text product.d ]
, li [] [ text product.e ] ]
in
ul [] children
renderProducts products =
List.map renderProduct products
The error is as follows:
The 2nd argument to function `div` is causing a mismatch.
78| div [] [ renderProducts model.products ]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Function `div` is expecting the 2nd argument to be:
List (VirtualDom.Node a)
But it is:
List (List (Html a))
renderProducts returns a list of elements. The second parameter of div takes a list of elements. By enclosing the second parameter in brackets, you are creating a list containing a single list of elements. That's why the error message says
But it is:
List (List (Html a))
You should instead do this:
div [] (renderProducts model.products)
I have a simple form with one field. I would like to clear the field on form submit. I am clearing my model in my update function, but text remains in the text input.
type alias Model =
{ currentSpelling : String }
type Msg
= MorePlease
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
MorePlease ->
( log "cleared spelling: " { model | currentSpelling = "" }
, fetchWord model.currentSpelling )
view : Model -> Html Msg
view model =
div []
[ Html.form [ onSubmit MorePlease ]
[ input [ type' "text"
, placeholder "Search for your word here"
, onInput NewSpelling
, attribute "autofocus" ""
] []
, text model.currentSpelling
, input [ type' "submit" ] [ text "submit!" ]
]
]
The text displaying model.currentSpelling clears out when I empty it with the update function, but the text input box remains populated. Any idea how to clear it?
fetchWord makes an HTTP call, but it's omitted here.
add value model.currentSpelling into Attributes of the
input element. That's how you can control the string
inside of input element in html.