about absolute position #245

New Issue

2016-11-08T21:12:34-08:00

anql commented

2016-11-08 21:12:34 -08:00

(Migrated from github.com)

code

#include "CSSLayout.h"
#include <iostream>


int main(int argc, const char * argv[]) {
    const CSSNodeRef root = CSSNodeNew();
    CSSNodeStyleSetWidth(root, 220);
    CSSNodeStyleSetHeight(root, 220);
    
    CSSNodeStyleSetBorder(root, CSSEdgeLeft, 10);
    CSSNodeStyleSetBorder(root, CSSEdgeTop, 10);
    CSSNodeStyleSetBorder(root, CSSEdgeRight, 10);
    CSSNodeStyleSetBorder(root, CSSEdgeBottom, 10);
    
    CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionColumn);
    
    const CSSNodeRef label_child1 = CSSNodeNew();
    CSSNodeInsertChild(root, label_child1, 0);
    CSSNodeStyleSetWidth(label_child1, 100);
    CSSNodeStyleSetHeight(label_child1, 100);
    CSSNodeStyleSetPosition(label_child1, CSSEdgeLeft, 0);
    CSSNodeStyleSetPosition(label_child1, CSSEdgeTop, 0);
    CSSNodeStyleSetPositionType(label_child1, CSSPositionTypeAbsolute);
    
    const CSSNodeRef label_child2 = CSSNodeNew();
    CSSNodeInsertChild(root, label_child2, 1);
    CSSNodeStyleSetWidth(label_child2, 100);
    CSSNodeStyleSetHeight(label_child2, 100);
    CSSNodeStyleSetPositionType(label_child2, CSSPositionTypeAbsolute);
    CSSNodeStyleSetPosition(label_child2, CSSEdgeRight, 0);
    CSSNodeStyleSetPosition(label_child2, CSSEdgeBottom, 0);

    CSSNodeCalculateLayout(root, 220, 220, CSSDirectionLTR);
    
    CSSNodeFreeRecursive(root);
    return 0;
}

Print Tree

{layout: {width: 220, height: 220, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, overflow: 'visible', borderWidth: 10, width: 220, height: 220, children: [
  {layout: {width: 100, height: 100, top: 10, left: 10}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, overflow: 'visible', width: 100, height: 100, position: 'absolute', left: 0, top: 0, },
  {layout: {width: 100, height: 100, top: 120, left: 120}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, overflow: 'visible', width: 100, height: 100, position: 'absolute', right: 0, bottom: 0, },
]},

label_child1: top:10, left:10
label_child2: top:120, left:120

I think label_child2 's left & top both should be 110.

<img width="633" alt="2016-11-09 1 09 29" src="https://cloud.githubusercontent.com/assets/6122573/20127815/c8219e98-a67d-11e6-85a0-1024c84a1298.png"> # code ``` #include "CSSLayout.h" #include <iostream> int main(int argc, const char * argv[]) { const CSSNodeRef root = CSSNodeNew(); CSSNodeStyleSetWidth(root, 220); CSSNodeStyleSetHeight(root, 220); CSSNodeStyleSetBorder(root, CSSEdgeLeft, 10); CSSNodeStyleSetBorder(root, CSSEdgeTop, 10); CSSNodeStyleSetBorder(root, CSSEdgeRight, 10); CSSNodeStyleSetBorder(root, CSSEdgeBottom, 10); CSSNodeStyleSetFlexDirection(root, CSSFlexDirectionColumn); const CSSNodeRef label_child1 = CSSNodeNew(); CSSNodeInsertChild(root, label_child1, 0); CSSNodeStyleSetWidth(label_child1, 100); CSSNodeStyleSetHeight(label_child1, 100); CSSNodeStyleSetPosition(label_child1, CSSEdgeLeft, 0); CSSNodeStyleSetPosition(label_child1, CSSEdgeTop, 0); CSSNodeStyleSetPositionType(label_child1, CSSPositionTypeAbsolute); const CSSNodeRef label_child2 = CSSNodeNew(); CSSNodeInsertChild(root, label_child2, 1); CSSNodeStyleSetWidth(label_child2, 100); CSSNodeStyleSetHeight(label_child2, 100); CSSNodeStyleSetPositionType(label_child2, CSSPositionTypeAbsolute); CSSNodeStyleSetPosition(label_child2, CSSEdgeRight, 0); CSSNodeStyleSetPosition(label_child2, CSSEdgeBottom, 0); CSSNodeCalculateLayout(root, 220, 220, CSSDirectionLTR); CSSNodeFreeRecursive(root); return 0; } ``` ## Print Tree ``` {layout: {width: 220, height: 220, top: 0, left: 0}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, overflow: 'visible', borderWidth: 10, width: 220, height: 220, children: [ {layout: {width: 100, height: 100, top: 10, left: 10}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, overflow: 'visible', width: 100, height: 100, position: 'absolute', left: 0, top: 0, }, {layout: {width: 100, height: 100, top: 120, left: 120}, flexDirection: 'column', alignItems: 'stretch', flexGrow: 0, flexShrink: 0, overflow: 'visible', width: 100, height: 100, position: 'absolute', right: 0, bottom: 0, }, ]}, ``` label_child1: top:10, left:10 label_child2: top:120, left:120 I think label_child2 's left & top both should be 110.

emilsjolander commented

2016-11-09 01:23:19 -08:00

(Migrated from github.com)

Yeah it seems that absolute positioned items aren't correctly respecting border. Can you add a jsfiddle repro? http://jsfiddle.net/s8ksdpre/1/