wrappedRow "height (shrink |> minimum ...)" + spacing doesn't vertically centre children

[shaydon]

Full SSCCE (Ellie).

Extract:

Element.wrappedRow
    [ width (px 500)
    , height (shrink |> minimum 200)
    , spacing 20
    ]
    [ childOfHeight 100
    , childOfHeight 50
    ]

Here the child elements end up towards the top of the parent row rather than being centred vertically within it:

+--------------+
|  XXXX        |
|  XXXX  XXXX  |
|  XXXX        |
|              |
|              |
+--------------+

Expected behavior That the child elements be centred vertically relative to the row, as they are when no spacing is given:

+--------------+
|              |
|  XXXX        |
|  XXXX  XXXX  |
|  XXXX        |
|              |
+--------------+

(See the Ellie without spacing.)

Versions

• OS: MacOS
• Browser: Chrome (also Safari, but WORKS CORRECTLY IN FIREFOX?)
• Browser Version: 79
• Elm Version: 0.19.1
• Elm UI Version: 1.1.5

Discussion

When spacing is added to the row, elm-ui inserts an additional wrapper div between row and child elements with a CSS height of calc(100% + <vertical spacing>) and top/bottom margins -<vertical spacing>/2. However, at least in Chrome and Safari, the attempt to reference the height of the parent row fails when the source has both height shrink and a minimum height, hence the intermediate div's height is effectively unset.

Note that setting a horizontal spacing only with spacingXY 20 0 still prompts the bug, as the height is set to calc(100% + 0px).

Workaround

For my purposes, forcing margin-top/bottom and height all to auto on the intermediate div gives the behaviour I need:

.s.r.ccy.wrp { margin-top: auto !important; margin-bottom: auto !important; height: auto !important; }

(See this last Ellie.)

But, I wouldn't be surprised if this fails in whatever scenario the negative margin, 100%+ height scheme is intended to address.

[alexkorban]

bug #has-ellie