Padding style

[crackcomm]

Hey @kjk please let me know if I understand it correctly:

Is padding a CSS padding attribute? When I use:

navigation := flex.NewNodeWithConfig(config)
navigation.StyleSetHeight(60)
navigation.StyleSetPadding(flex.EdgeAll, 20)
navigation.StyleSetFlexDirection(flex.FlexDirectionRow)

for index := 0; index < 5; index++ {
    child := flex.NewNodeWithConfig(config)
    child.StyleSetPadding(flex.EdgeAll, 20)
    navigation.InsertChild(child, index)
}

I thought I'd receive padding: 20px, here is the output:

<div layout="width: 240; height: 60; top: 0; left: 0;" style="flex-direction: row; height: 60px; ">
    <div layout="width: 40; height: 40; top: 20; left: 20;" style=""></div>
    <div layout="width: 40; height: 40; top: 20; left: 60;" style=""></div>
    <div layout="width: 40; height: 40; top: 20; left: 100;" style=""></div>
    <div layout="width: 40; height: 40; top: 20; left: 140;" style=""></div>
    <div layout="width: 40; height: 40; top: 20; left: 180;" style=""></div>  
  </div>

Let me know if I understand it correctly or I misused it, thanks.

complete source

[kjk]

This seems correct to me. Flex layout calculates positions and sizes (width/height/top/left) from input style (padding etc.)

Your specified padding of 20 in each direction for all children which is reflected in their top/left positions given row layout.

[crackcomm]

@kjk
Here is how it looks when I insert text:

Could you explain how I could achieve result like above using only flex?:

[kjk]

This is just a port of https://github.com/facebook/yoga

If you have questions about the API and expected results, reach out to them.

[crackcomm]

Thank you for your time.

[crackcomm]

Here is the C code:

YGNodeRef root = YGNodeNew();
YGNodeStyleSetWidth(root, 500);
YGNodeStyleSetHeight(root, 120);
YGNodeStyleSetFlexDirection(root, YGFlexDirectionRow);
YGNodeStyleSetPadding(root, YGEdgeAll, 20);

YGNodeRef image = YGNodeNew();
YGNodeStyleSetWidth(image, 80);
YGNodeStyleSetMargin(image, YGEdgeEnd, 20);

YGNodeRef text = YGNodeNew();
YGNodeStyleSetHeight(text, 25);
YGNodeStyleSetAlignSelf(text, YGAlignCenter);
YGNodeStyleSetFlexGrow(text, 1);

YGNodeInsertChild(root, image, 0);
YGNodeInsertChild(root, text, 1);

Here is output (as presented on website):

<div class="yoga sample" style="background-color: white; width: 500px; height: 120px; padding: 20px; flex-direction:row;">
        <div class="yoga" style="background-color: #97dccf; width: 80px; margin-right: 20px;"></div>
        <div class="yoga" style="background-color: #303846; flex-grow: 1; height: 25px; align-self: center;"></div>
</div>

Here is Go code:

root := flex.NewNodeWithConfig(config)
root.StyleSetWidth(500)
root.StyleSetHeight(120)
root.StyleSetFlexDirection(flex.FlexDirectionRow)
root.StyleSetPadding(flex.EdgeAll, 20)

image := flex.NewNodeWithConfig(config)
image.StyleSetWidth(80)
image.StyleSetMargin(flex.EdgeEnd, 20)

text := flex.NewNodeWithConfig(config)
text.StyleSetHeight(25)
text.StyleSetAlignSelf(flex.AlignCenter)
text.StyleSetFlexGrow(1)

root.InsertChild(image, 0)
root.InsertChild(text, 1)

Here is output:

<div layout="width: 500; height: 120; top: 0; left: 0;" style="flex-direction: row; width: 500px; height: 120px; ">
  <div layout="width: 80; height: 80; top: 20; left: 20;" style="width: 80px; "></div>
  <div layout="width: 360; height: 25; top: 48; left: 120;" style="align-self: center; flex-grow: 1; height: 25px; "></div>
</div>

Again, no paddings nor margins in Go-produced layout.

I am not trying to waste your time. I don't know yoga enough but it seems invalid to me, at least from what I see in the docs and results.

[kjk]

The important thing is that calculated layout values (width/height/top/left) match and they do in both printouts.

Node printing is only to help debugging issues. Go node printing is supposed to match C code (https://github.com/facebook/yoga/blob/master/yoga/Yoga.c#L1048).

The output you show does not come from C code (C code doesn't print "class" attribute anywhere or "background-color").

Both C and Go code would omit styles that are the same as flex defaults.

Missing "padding" does look like a bug but C code seems to have the same bug for EdgeAll, so it's a low priority to fix.

[crackcomm]

Thank you for your explanation.