search

mdgriffith / style-elements

Create styles that don't mysteriously break!
http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
BSD 3-Clause "New" or "Revised" License
445 stars 49 forks source link

header or footer tag changes the behaviour of the spread attributes for children elements #139

Open clouddie opened 6 years ago

clouddie commented 6 years ago

The big picture of what I'm trying to do

I am trying to create a header, mainContent, and footer, and in my header and footer, a row which contains links spread horizontally.

What I did

The full example is in Ellie https://ellie-app.com/bnCJSq5zMa1/2, and here is an excerpt:

main : Html msg
main =
    layout stylesheet <|
        column None
            [ ]
            [ header Top [] <|
                row None
                    [ width fill, spread ]
                    [ el None [] (Element.text "top left")
                    , el None [] (Element.text "top right")
                    ]
            , el None [] (Element.text "Header and footer should not grow to 100% height")
            , footer Bottom [] <|
                row None
                    [ width fill, spread ]
                    [ el None [] (Element.text "bottom left")
                    , el None [] (Element.text "bottom right")
                    ]
            ]

What I Expected To Happen

I expected to have a small header, a small footer, and a tall main Content (because under the scene it has the height fill attribute)

What Actually Happened

The header and footer take each 100% of the screen height, and the main Content is small.

See : https://ellie-app.com/bnCJSq5zMa1/2

What is very strange, is that the behaviour disappears when I remove the header element and keep only the inside row. As you can see here: https://ellie-app.com/bnCJSq5zMa1/3, the header (which is now only a row) text has spread horizontally, but not vertically anymore. Which is what was expected.

It seems like that the header element adds a 100% height attribute to its child (by inspecting with dev tools), which is weird ?

Versions