wrappedRow with centerX does not render centered when wrapped

[mdgriffith]

wrappedRow with centerX does not render centered when wrapped

[AlienKevin]

I encountered this similar issue when trying to center an input slider in a column. A simple workaround to center one element in a column is:

E.column
        []
        [ ......
        , E.el
            [ E.htmlAttribute (Html.Attributes.style "marginLeft" "auto")
            ,  E.htmlAttribute (Html.Attributes.style "marginRight" "auto")
            ]
            yourElementHere
        , ......
        ]

Also remember to do

import Element as E
import Html.Attributes

in the header.

I also extracted out a function for centering an element:

center : E.Element msg -> E.Element msg
center element =
    E.el
        [ E.htmlAttribute (Html.Attributes.style "marginLeft" "auto")
        ,  E.htmlAttribute (Html.Attributes.style "marginRight" "auto")
        ]
        element

so the above example can be simplified as:

E.column
        []
        [ ......
        , center
          yourElementHere
        , ......
        ]

If you have many elements that needs to be centered, I created this helper function:

centerAll : List (E.Element msg) -> List (E.Element msg)
centerAll elements =
    List.map
    center
    elements

Use centerAll like so:

E.column
        []
        ( centerAll
        [ element1
        , element2
        , element3
        , element4      
        ])

To preserve the spacing of the row/column, you can use centerList:

centerList : List (E.Element msg) -> List (E.Element msg)
centerList elements =
    let
        length =
            List.length elements
    in
    List.indexedMap
        (\index element ->
            if index == 0 then
                E.el
                    [ E.htmlAttribute (Html.Attributes.style "marginLeft" "auto") ]
                    element

            else if index == length - 1 then
                E.el
                    [ E.htmlAttribute (Html.Attributes.style "marginRight" "auto") ]
                    element

            else
                element
        )
        elements

[alexkorban]

#unexpected

[eelcoh]

Bit late to this one, but had the same problem. Found out that the culprit is the CenterX attribute on the element (not the row). Remove that one, and the row will align left. Or wrap it in an Element.el []

[simvux]

Another temporary workaround that doesn't require writing and importing css (but might be a bit more hacky) is if you have a Browser.Events.onResize subscription you could do something like

 (if m.window.width < 1100 then
            column
         else
            row) [] <| none