elm-ui_ie11_issue.elm

module Main exposing (main)

import Browser
import Element exposing (Element)
import Html exposing (Html)
import Html.Attributes


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


view : () -> Html msg
view _ =
    Html.div []
        [ Html.node "style"
            []
            [ Html.text "@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {#ie-flex-fix { flex-basis: 0% !important; }}" ]
        , Element.layout []
            (Element.column []
                [ okay
                , overfloweth
                , withFlexBasisFix
                , withFlexBasisFixNoRowFill
                ]
            )
        ]


okay : Element msg
okay =
    Element.el
        [ Element.width <| Element.px 90 ]
        (Element.paragraph
            [ Element.explain Debug.todo
            ]
            [ Element.text "foo bar baz" ]
        )


overfloweth : Element msg
overfloweth =
    Element.el
        [ Element.width <| Element.px 90 ]
        (Element.row
            [ Element.width Element.fill ]
            [ Element.paragraph
                [ Element.explain Debug.todo
                ]
                [ Element.text "foo bar baz" ]
            ]
        )


withFlexBasisFix : Element msg
withFlexBasisFix =
    Element.el
        [ Element.width <| Element.px 90 ]
        (Element.row
            [ Element.width Element.fill ]
            [ Element.paragraph
                [ Element.explain Debug.todo
                , Element.htmlAttribute <| Html.Attributes.attribute "id" "ie-flex-fix"
                ]
                [ Element.text "foo bar baz" ]
            ]
        )


withFlexBasisFixNoRowFill : Element msg
withFlexBasisFixNoRowFill =
    Element.el
        [ Element.width <| Element.px 90 ]
        (Element.row
            []
            [ Element.paragraph
                [ Element.explain Debug.todo
                , Element.htmlAttribute <| Html.Attributes.attribute "id" "ie-flex-fix"
                ]
                [ Element.text "foo bar baz" ]
            ]
        )