DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Padding on container parent is not applied to children #455

New Issue
Open
opened 2017-03-02 09:43:56 -08:00 by d16r · 3 comments
d16r commented 2017-03-02 09:43:56 -08:00 (Migrated from github.com)
Copy Link
1.{*wm: LAY_EXACTLY, hm: LAY_EXACTLY, aw: 375.000000 ah: 202.000000 initial
  2.{*wm: AT_MOST, hm: AT_MOST, aw: 303.000000 ah: 130.000000 measure
  2.}*wm: AT_MOST, hm: AT_MOST, d: (148.666672, 31.333334) measure
  2.{*wm: AT_MOST, hm: AT_MOST, aw: 303.000000 ah: 130.000000 measure
   3.{*wm: AT_MOST, hm: EXACTLY, aw: 303.000000 ah: 28.000000 measure
   3.}*wm: AT_MOST, hm: EXACTLY, d: (16.000000, 28.000000) measure
   3.{wm: EXACTLY, hm: EXACTLY, aw: 303.000000 ah: 28.000000 flex
   3.}wm: EXACTLY, hm: EXACTLY, d: (303.000000, 28.000000) flex
  2.}*wm: AT_MOST, hm: AT_MOST, d: (303.000000, 28.000000) measure
  2.{*wm: LAY_EXACTLY, hm: LAY_EXACTLY, aw: 88.000000 ah: 88.000000 flex
  2.}*wm: LAY_EXACTLY, hm: LAY_EXACTLY, d: (88.000000, 88.000000) flex
  2.{[skipped] wm: LAY_AT_MOST, hm: LAY_EXACTLY, aw: 303.000000 ah: 55.333336 => d: (148.666672, 31.333334) flex
  2.{wm: LAY_AT_MOST, hm: LAY_EXACTLY, aw: 303.000000 ah: 52.000000 flex
   3.{[skipped] wm: AT_MOST, hm: EXACTLY, aw: 303.000000 ah: 28.000000 => d: (16.000000, 28.000000) measure
   3.{[skipped] wm: LAY_EXACTLY, hm: LAY_EXACTLY, aw: 303.000000 ah: 28.000000 => d: (303.000000, 28.000000) flex
  2.}wm: LAY_AT_MOST, hm: LAY_EXACTLY, d: (303.000000, 28.000000) flex
 1.}*wm: LAY_EXACTLY, hm: LAY_EXACTLY, d: (375.000000, 202.000000) initial
{layout: {width: 375, height: 202, top: 0, left: 0}, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', flexGrow: 0, flexShrink: 0, flexBasis: nan%, overflow: 'visible', padding: 36pt, width: nan%, height: nan%, children: [
  {layout: {width: 88, height: 88, top: 3.33333, left: 143.5}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, flexBasis: nan%, overflow: 'visible', width: 88pt, height: 88pt, },
  {layout: {width: 148.667, height: 31.3333, top: 115.333, left: 113.167}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, flexBasis: nan%, overflow: 'visible', marginTop: 24pt, marginStart: nan%, marginEnd: nan%, width: nan%, height: nan%, },
  {layout: {width: 303, height: 28, top: 170.667, left: 36}, flexDirection: 'row', justifyContent: 'center', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, flexBasis: nan%, overflow: 'visible', marginTop: 24pt, marginStart: nan%, marginEnd: nan%, width: nan%, height: nan%, maxWidth: 320pt, children: [
    {layout: {width: 303, height: 28, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 1, flexShrink: 0, flexBasis: nan%, overflow: 'visible', width: nan%, height: 28pt, },
  ]},
]},

As you can see, the parent element has padding set to 36, but, it's first child is top is 3.3333.

``` 1.{*wm: LAY_EXACTLY, hm: LAY_EXACTLY, aw: 375.000000 ah: 202.000000 initial 2.{*wm: AT_MOST, hm: AT_MOST, aw: 303.000000 ah: 130.000000 measure 2.}*wm: AT_MOST, hm: AT_MOST, d: (148.666672, 31.333334) measure 2.{*wm: AT_MOST, hm: AT_MOST, aw: 303.000000 ah: 130.000000 measure 3.{*wm: AT_MOST, hm: EXACTLY, aw: 303.000000 ah: 28.000000 measure 3.}*wm: AT_MOST, hm: EXACTLY, d: (16.000000, 28.000000) measure 3.{wm: EXACTLY, hm: EXACTLY, aw: 303.000000 ah: 28.000000 flex 3.}wm: EXACTLY, hm: EXACTLY, d: (303.000000, 28.000000) flex 2.}*wm: AT_MOST, hm: AT_MOST, d: (303.000000, 28.000000) measure 2.{*wm: LAY_EXACTLY, hm: LAY_EXACTLY, aw: 88.000000 ah: 88.000000 flex 2.}*wm: LAY_EXACTLY, hm: LAY_EXACTLY, d: (88.000000, 88.000000) flex 2.{[skipped] wm: LAY_AT_MOST, hm: LAY_EXACTLY, aw: 303.000000 ah: 55.333336 => d: (148.666672, 31.333334) flex 2.{wm: LAY_AT_MOST, hm: LAY_EXACTLY, aw: 303.000000 ah: 52.000000 flex 3.{[skipped] wm: AT_MOST, hm: EXACTLY, aw: 303.000000 ah: 28.000000 => d: (16.000000, 28.000000) measure 3.{[skipped] wm: LAY_EXACTLY, hm: LAY_EXACTLY, aw: 303.000000 ah: 28.000000 => d: (303.000000, 28.000000) flex 2.}wm: LAY_AT_MOST, hm: LAY_EXACTLY, d: (303.000000, 28.000000) flex 1.}*wm: LAY_EXACTLY, hm: LAY_EXACTLY, d: (375.000000, 202.000000) initial {layout: {width: 375, height: 202, top: 0, left: 0}, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', flexGrow: 0, flexShrink: 0, flexBasis: nan%, overflow: 'visible', padding: 36pt, width: nan%, height: nan%, children: [ {layout: {width: 88, height: 88, top: 3.33333, left: 143.5}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, flexBasis: nan%, overflow: 'visible', width: 88pt, height: 88pt, }, {layout: {width: 148.667, height: 31.3333, top: 115.333, left: 113.167}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, flexBasis: nan%, overflow: 'visible', marginTop: 24pt, marginStart: nan%, marginEnd: nan%, width: nan%, height: nan%, }, {layout: {width: 303, height: 28, top: 170.667, left: 36}, flexDirection: 'row', justifyContent: 'center', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, flexBasis: nan%, overflow: 'visible', marginTop: 24pt, marginStart: nan%, marginEnd: nan%, width: nan%, height: nan%, maxWidth: 320pt, children: [ {layout: {width: 303, height: 28, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 1, flexShrink: 0, flexBasis: nan%, overflow: 'visible', width: nan%, height: 28pt, }, ]}, ]}, ``` As you can see, the parent element has padding set to 36, but, it's first child is `top` is 3.3333.
woehrl01 commented 2017-03-02 10:34:39 -08:00 (Migrated from github.com)
Copy Link

@dshahidehpour I just had a look, but I can't reproduce it. I used the following test:

<div id="padding_issue_455" experiments="MinFlexFix" style="flex-direction: column; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; padding: 36px">
  <div style="flex-direction: column; align-items: stretch; flex-grow: 0; flex-shrink: 0; width: 88px; height: 88px"></div>
  <div style="flex-direction: column; align-items: stretch; margin-top: 24px;"></div>
  <div style="flex-direction: row; justify-content: center; align-items: stretch; margin-top: 24px; max-width: 320px;">
    <div style="flex-direction: column; align-items: stretch; flex-grow: 1; flex-shrink: 0; height: 28px;"></div>
  </div>
</div>

and this one passes. I just had to enable the YGExperimentalFeatureMinFlexFix to workaround the problem with the max-width. Could this be you're problem too? But maybe I did a mistake in converting the test.

@dshahidehpour I just had a look, but I can't reproduce it. I used the following test: ```html <div id="padding_issue_455" experiments="MinFlexFix" style="flex-direction: column; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; padding: 36px"> <div style="flex-direction: column; align-items: stretch; flex-grow: 0; flex-shrink: 0; width: 88px; height: 88px"></div> <div style="flex-direction: column; align-items: stretch; margin-top: 24px;"></div> <div style="flex-direction: row; justify-content: center; align-items: stretch; margin-top: 24px; max-width: 320px;"> <div style="flex-direction: column; align-items: stretch; flex-grow: 1; flex-shrink: 0; height: 28px;"></div> </div> </div> ``` and this one passes. I just had to enable the ```YGExperimentalFeatureMinFlexFix``` to workaround the problem with the max-width. Could this be you're problem too? But maybe I did a mistake in converting the test.
d16r commented 2017-03-02 11:09:19 -08:00 (Migrated from github.com)
Copy Link

@woehrl01 Did you try setting the #padding_issue_455 to have a size of {375, 202} and verify the padding is still correct? Enabling the MinFlexFix didn't fix this for me.

Also, if it helps, That layout above is being calculated via YogaKit

@woehrl01 Did you try setting the #padding_issue_455 to have a size of {375, 202} and verify the padding is still correct? Enabling the MinFlexFix didn't fix this for me. Also, if it helps, That layout above is being calculated via YogaKit
woehrl01 commented 2017-03-02 11:31:06 -08:00 (Migrated from github.com)
Copy Link

this failes

<div id="padding_issue_dd" experiments="Rounding" style="width: 375px; height: 202px; flex-direction: column; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; padding: 36px">
  <div style="flex-direction: column; align-items: stretch; flex-grow: 0; flex-shrink: 0; width: 88px; height: 88px"></div>
  <div style="flex-direction: column; align-items: stretch; margin-top: 24px;"></div>
  <div style="flex-direction: row; justify-content: center; align-items: stretch; margin-top: 24px; max-width: 320px;">
    <div style="flex-direction: column; align-items: stretch; flex-grow: 1; flex-shrink: 0; height: 28px;"></div>
  </div>
</div>

but only on the left values not top:

c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(313): error:       Expected: 188
To be equal to: YGNodeLayoutGetLeft(root_child2)
      Which is: 36
c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(315): error:       Expected: 0
To be equal to: YGNodeLayoutGetWidth(root_child2)
      Which is: 303
c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(320): error:       Expected: 0
To be equal to: YGNodeLayoutGetWidth(root_child2_child0)
      Which is: 303
c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(340): error:       Expected: 188
To be equal to: YGNodeLayoutGetLeft(root_child2)
      Which is: 36
c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(342): error:       Expected: 0
To be equal to: YGNodeLayoutGetWidth(root_child2)
      Which is: 303
c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(347): error:       Expected: 0
To be equal to: YGNodeLayoutGetWidth(root_child2_child0)
      Which is: 303

Unfortunately I can't look into this deeper in the next days.

this failes ```html <div id="padding_issue_dd" experiments="Rounding" style="width: 375px; height: 202px; flex-direction: column; justify-content: center; align-items: center; flex-grow: 0; flex-shrink: 0; padding: 36px"> <div style="flex-direction: column; align-items: stretch; flex-grow: 0; flex-shrink: 0; width: 88px; height: 88px"></div> <div style="flex-direction: column; align-items: stretch; margin-top: 24px;"></div> <div style="flex-direction: row; justify-content: center; align-items: stretch; margin-top: 24px; max-width: 320px;"> <div style="flex-direction: column; align-items: stretch; flex-grow: 1; flex-shrink: 0; height: 28px;"></div> </div> </div> ``` but only on the left values not top: ``` c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(313): error: Expected: 188 To be equal to: YGNodeLayoutGetLeft(root_child2) Which is: 36 c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(315): error: Expected: 0 To be equal to: YGNodeLayoutGetWidth(root_child2) Which is: 303 c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(320): error: Expected: 0 To be equal to: YGNodeLayoutGetWidth(root_child2_child0) Which is: 303 c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(340): error: Expected: 188 To be equal to: YGNodeLayoutGetLeft(root_child2) Which is: 36 c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(342): error: Expected: 0 To be equal to: YGNodeLayoutGetWidth(root_child2) Which is: 303 c:\users\lukas\dev\yoga\tests\ygpaddingtest.cpp(347): error: Expected: 0 To be equal to: YGNodeLayoutGetWidth(root_child2_child0) Which is: 303 ``` Unfortunately I can't look into this deeper in the next days.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Algorithm
Build and Infrastructure
C#
C++ Enhancement
CLA Signed
Discussion
Documentation
Feature Request
Java
JavaScript
Merged
Question
Reverted
Shared with Meta
Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
YogaKit
YogaLayout ViewGroup
bug
dependencies
Pull requests that update a dependency file
duplicate
enhancement
fb-exported
fh:direct-merge-enabled
invalid
ruby
Pull requests that update Ruby code
wontfix
No Label
Algorithm
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
DaddyFrosty
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#455
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?