style-elements icon indicating copy to clipboard operation
style-elements copied to clipboard

Using `fill 1` or `percent 100` for `height` when parent has `verticalCenter` won't work

Open nimser opened this issue 8 years ago • 1 comments

Description

Consider a row of fixed height with several children and grand-children as follows, where empty could be any element:

row ()
    [ height (px 100), verticalCenter ]
    , el () [ height (fill 1), width (px 100) ] empty            
    , el () [] empty
    , row () [] [ empty, empty ]
    ]

Using verticalCenter in the parent row as above will center the children as intended but any children with fill 1 or percent 100 will be sized according to its own height instead of that of its parent. Replacing fill 1 with percent 99 or a fixed size like px 50 will however produce the expected result.

SSCCE

You can find an illustration in this Ellie example

The code with the fill 1 + verticalCenter renders like so with an empty element as the logo (without the brown square):

But it should actually render as follows (with the brown square):

Replacing the empty element of the logo with a text "Lorem" will produce the following unexpected result:

instead of the expected:

nimser avatar Aug 03 '17 08:08 nimser

I'm encountering the same problem. It seems the wrapper used to allow verticalCenter has "height: auto", which prevents children from having a parent height reference to grow.

Augustin82 avatar Nov 16 '17 09:11 Augustin82