Parent components ignore min-* and max-* values. #570

New Issue

2017-05-31T12:12:07-07:00

arcanis commented

2017-05-31 12:12:07 -07:00

(Migrated from github.com)

I noticed that when both the min-height and height properties are set, if the min-height is higher than the height, then the siblings will be positioned as if the element height was its min-height (which is what happens in browsers), but the parent container will use the height instead (which means it will be smaller than it should). I believe the opposite is also true (a max-height lower than the height).

Browser rendering:
https://jsfiddle.net/Lrqeng4b/

Yoga rendering:
https://manaflair.github.io/mylittledom/demo/#custom:import%20%7B%20TermElement%2C%20TermInput%20%7D%20from%20'%40manaflair%2Fmylittledom%2Fterm'%3B%0A%0Alet%20container%20%3D%20new%20TermElement()%3B%0Acontainer.style.padding%20%3D%201%3B%0Acontainer.style.background%20%3D%20%60green%60%3B%0Acontainer.appendTo(screen)%3B%0A%0Alet%20a%20%3D%20new%20TermElement()%3B%0Aa.style.minHeight%20%3D%2010%3B%0Aa.style.height%20%3D%203%3B%0Aa.style.background%20%3D%20%60red%60%3B%0Aa.appendTo(container)%3B%0A%0Alet%20b%20%3D%20new%20TermInput(%7B%20multiline%3A%20true%20%7D)%3B%0Ab.style.marginTop%20%3D%201%3B%0Ab.style.height%20%3D%203%3B%0Ab.style.background%20%3D%20%60yellow%60%3B%0Ab.appendTo(container)%3B%0A%0Alet%20c%20%3D%20new%20TermElement()%3B%0Ac.style.height%20%3D%2010%3B%0Ac.style.marginTop%20%3D%201%3B%0Ac.style.background%20%3D%20%60blue%60%3B%0Ac.appendTo(container)%3B%0A

I noticed that when both the `min-height` and `height` properties are set, if the min-height is higher than the height, then the siblings will be positioned as if the element height was its min-height (which is what happens in browsers), but the parent container will use the height instead (which means it will be smaller than it should). I believe the opposite is also true (a max-height lower than the height). Browser rendering: https://jsfiddle.net/Lrqeng4b/ Yoga rendering: https://manaflair.github.io/mylittledom/demo/#custom:import%20%7B%20TermElement%2C%20TermInput%20%7D%20from%20'%40manaflair%2Fmylittledom%2Fterm'%3B%0A%0Alet%20container%20%3D%20new%20TermElement()%3B%0Acontainer.style.padding%20%3D%201%3B%0Acontainer.style.background%20%3D%20%60green%60%3B%0Acontainer.appendTo(screen)%3B%0A%0Alet%20a%20%3D%20new%20TermElement()%3B%0Aa.style.minHeight%20%3D%2010%3B%0Aa.style.height%20%3D%203%3B%0Aa.style.background%20%3D%20%60red%60%3B%0Aa.appendTo(container)%3B%0A%0Alet%20b%20%3D%20new%20TermInput(%7B%20multiline%3A%20true%20%7D)%3B%0Ab.style.marginTop%20%3D%201%3B%0Ab.style.height%20%3D%203%3B%0Ab.style.background%20%3D%20%60yellow%60%3B%0Ab.appendTo(container)%3B%0A%0Alet%20c%20%3D%20new%20TermElement()%3B%0Ac.style.height%20%3D%2010%3B%0Ac.style.marginTop%20%3D%201%3B%0Ac.style.background%20%3D%20%60blue%60%3B%0Ac.appendTo(container)%3B%0A

woehrl01 commented

2017-06-02 01:58:15 -07:00

(Migrated from github.com)

I can't verify that on the master:

<div id="min_height_bigger_than_height_of_child" style="padding: 10px;">
  <div style="min-height: 100px; height: 30px;"></div>
  <div style="margin-top: 10px; height: 30px;"></div>
  <div style="margin-top: 10px; height: 30px;"></div>
</div>

ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root));
ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root));
ASSERT_FLOAT_EQ(20, YGNodeLayoutGetWidth(root));
ASSERT_FLOAT_EQ(200, YGNodeLayoutGetHeight(root));

I can't verify that on the master: ```html <div id="min_height_bigger_than_height_of_child" style="padding: 10px;"> <div style="min-height: 100px; height: 30px;"></div> <div style="margin-top: 10px; height: 30px;"></div> <div style="margin-top: 10px; height: 30px;"></div> </div> ``` ```c ASSERT_FLOAT_EQ(0, YGNodeLayoutGetLeft(root)); ASSERT_FLOAT_EQ(0, YGNodeLayoutGetTop(root)); ASSERT_FLOAT_EQ(20, YGNodeLayoutGetWidth(root)); ASSERT_FLOAT_EQ(200, YGNodeLayoutGetHeight(root)); ``` ![image](https://cloud.githubusercontent.com/assets/2535856/26718655/028f8dce-4782-11e7-84bc-52303ad0e389.png)

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#570