rtfeldman / elm-css

Typed CSS in Elm.
https://package.elm-lang.org/packages/rtfeldman/elm-css/latest
BSD 3-Clause "New" or "Revised" License
1.23k stars 196 forks source link

Bug: Weird stuff is happening with Html.Styled.Lazy #522

Open Kurren123 opened 4 years ago

Kurren123 commented 4 years ago

Minimal ellie example

Code from the ellie example:

module Main exposing (main)

import Browser
import Html.Styled exposing (..)
import Html.Styled.Lazy exposing (..)
import Css exposing (..)
import Html.Styled.Attributes exposing (css)

strings = 
    [ "A" , "B", "C"]

viewString : String -> Html msg 
viewString str =
     let 
         strColour = 
             if str == "A" 
             then rgb 166 11 0
             else rgb 0 110 29
     in 
         option [ css [ color strColour ] ] [ text str ]

viewStrings : Html msg
viewStrings =     
    strings
        |> List.map (\txt -> lazy viewString txt )
        |> select [  ]

view _ =
    viewStrings
    |> toUnstyled

main : Program () () ()
main =
    Browser.sandbox
        { init = ()
        , view = view
        , update = \_ _ -> ()
        }

I want to colour the individual options differently.

Without lazy: image

With lazy:

image