Layout Calculation Issue on Element Resize? #650

bennobuilder · 2024-05-03T15:49:55Z

bennobuilder
May 3, 2024

Hello everyone,

When resizing an element's (7v1) height, the (on the parent 5v1) defined 20px gap (y) seems to disappear, and the element also seems to resize from its center and thus doesn't align with the defined align-items: start and justify-content: start settings anymore? This issue doesn't occur in the simplified HTML example provided. I've attached a video to demonstrate the problem. I'm probably overlooking something simple again (as I did here #649)? Thanks :)

Screen.Recording.2024-05-03.at.5.24.54.PM.mov

Setup

See details in "Raw Logs" section

In the demonstrated example there is a Frame (Black) with two Rectangles (Gray) as children.

The Frame has the following style properties (which don't change through out the example):

- display: Flex
- size: Size { width: Length(120.0), height: Length(240.0) }
- padding: Rect { left: Length(10.0), right: Length(10.0), top: Length(10.0), bottom: Length(10.0) }
- align_items: Some(Start)
- justify_content: Some(Start)
- gap: Size { width: Length(0.0), height: Length(20.0) }
- flex_direction: Column

// Raw:
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967297)): Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Relative, inset: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, size: Size { width: Length(120.0), height: Length(240.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, padding: Rect { left: Length(10.0), right: Length(10.0), top: Length(10.0), bottom: Length(10.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: Some(Start), align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: Some(Start), gap: Size { width: Length(0.0), height: Length(20.0) }, flex_direction: Column, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }

The two Rectangles have the following style properties (The height of NodeId(4294967298) (7v1) changes through out the example, see video):

 - size: Size { width: Length(100.0), height: Length(100.0) }

// Raw
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967298)): Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Relative, inset: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, size: Size { width: Length(100.0), height: Length(100.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, padding: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: None, align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: None, gap: Size { width: Length(0.0), height: Length(0.0) }, flex_direction: Row, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967299)): Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Relative, inset: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, size: Size { width: Length(100.0), height: Length(100.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, padding: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: None, align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: None, gap: Size { width: Length(0.0), height: Length(0.0) }, flex_direction: Row, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }

HTML Equivalent

<div class="absolute h-[500px] w-[500px] bg-yellow-200">
    <!-- Outer Frame -->
    <div
        class="absolute left-[190px] top-[130px] flex h-[240px] w-[120px] flex-col items-start justify-start gap-y-[20px] bg-black p-[10px]">
        <!-- Inner Frame -->
        <div class="h-[100px] w-[100px] bg-gray-300">
            <!-- First Rectangle -->
        </div>
        <div class="h-[100px] w-[100px] bg-gray-300">
            <!-- Second Rectangle -->
        </div>
    </div>
</div>

Raw Logs

// Initial layout calculation
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967297)): Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Relative, inset: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, size: Size { width: Length(120.0), height: Length(240.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, padding: Rect { left: Length(10.0), right: Length(10.0), top: Length(10.0), bottom: Length(10.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: Some(Start), align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: Some(Start), gap: Size { width: Length(0.0), height: Length(20.0) }, flex_direction: Column, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967298)): Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Relative, inset: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, size: Size { width: Length(100.0), height: Length(100.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, padding: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: None, align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: None, gap: Size { width: Length(0.0), height: Length(0.0) }, flex_direction: Row, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967299)): Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Relative, inset: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, size: Size { width: Length(100.0), height: Length(100.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, padding: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: None, align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: None, gap: Size { width: Length(0.0), height: Length(0.0) }, flex_direction: Row, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }
index.js:428 INFO: TREE
index.js:428 INFO: └──  FLEX COL [x: 0    y: 0    w: 120  h: 240  content_w: 110  content_h: 230  border: l:0 r:0 t:0 b:0, padding: l:10 r:10 t:10 b:10] (NodeId(4294967297) / "5v1")
index.js:428 INFO:     ├──  LEAF [x: 10   y: 10   w: 100  h: 100  content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967298) / "7v1")
index.js:428 INFO:     └──  LEAF [x: 10   y: 130  w: 100  h: 100  content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967299) / "9v1")

// ..

// Layout calculation through out resizing
index.js:428 INFO: [update_leaf] NodeId(4294967298): Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Relative, inset: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, size: Size { width: Length(100.0), height: Length(98.885315) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Auto, right: Auto, top: Auto, bottom: Auto }, padding: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: None, align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: None, gap: Size { width: Length(0.0), height: Length(0.0) }, flex_direction: Row, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }
index.js:428 INFO: TREE
index.js:428 INFO: └──  FLEX COL [x: 0    y: 0    w: 120  h: 240  content_w: 110  content_h: 210  border: l:0 r:0 t:0 b:0, padding: l:10 r:10 t:10 b:10] (NodeId(4294967297) / "5v1")
index.js:428 INFO:     ├──  LEAF [x: 10   y: 10   w: 100  h: 99   content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967298) / "7v1")
index.js:428 INFO:     └──  LEAF [x: 10   y: 110  w: 100  h: 100  content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967299) / "9v1")

Source: https://github.com/dyndotart/monorepo/blob/develop/crates/comp_core/src/systems/layout/static_layout.rs

Answered by bennobuilder

May 5, 2024

Ok, I think I found my issue. I set margin to auto 🤦‍♂️

View full answer

bennobuilder · 2024-05-04T05:52:10Z

bennobuilder
May 4, 2024
Author

There seems to be a connection between the potential miss alignment and the content_h if the content_h is 230 the output seems correct and if its 210 the output doesn't seem correct 🤷

0 replies

bennobuilder · 2024-05-05T05:48:08Z

bennobuilder
May 5, 2024
Author

I'm doing something wrong, but idk what 😬

Input

Styles

INFO: [new_leaf] Ok(NodeId(4294967297)): Style {
    display: Flex, // <--------------------------
    overflow: Point {
        x: Visible,
        y: Visible,
    },
    scrollbar_width: 0.0,
    position: Relative,
    inset: Rect {
        left: Auto,
        right: Auto,
        top: Auto,
        bottom: Auto,
    },
    size: Size {
        width: Length(
            120.0,
        ),
        height: Length(
            285.0,
        ),
    }, // <--------------------------
    min_size: Size {
        width: Auto,
        height: Auto,
    },
    max_size: Size {
        width: Auto,
        height: Auto,
    },
    aspect_ratio: None,
    margin: Rect {
        left: Length(
            0.0,
        ),
        right: Length(
            0.0,
        ),
        top: Length(
            0.0,
        ),
        bottom: Length(
            0.0,
        ),
    },
    padding: Rect {
        left: Length(
            10.0,
        ),
        right: Length(
            10.0,
        ),
        top: Length(
            10.0,
        ),
        bottom: Length(
            10.0,
        ),
    }, // <--------------------------
    border: Rect {
        left: Length(
            0.0,
        ),
        right: Length(
            0.0,
        ),
        top: Length(
            0.0,
        ),
        bottom: Length(
            0.0,
        ),
    },
    align_items: Some(
        Center,
    ), // <--------------------------
    align_self: None,
    justify_items: None,
    justify_self: None,
    align_content: None,
    justify_content: Some(
        Center,
    ), // <--------------------------
    gap: Size {
        width: Length(
            0.0,
        ),
        height: Length(
            0.0,
        ),
    },
    flex_direction: Column, // <--------------------------
    flex_wrap: NoWrap,
    flex_basis: Auto,
    flex_grow: 0.0,
    flex_shrink: 1.0,
    grid_template_rows: [],
    grid_template_columns: [],
    grid_auto_rows: [],
    grid_auto_columns: [],
    grid_auto_flow: Row,
    grid_row: Line {
        start: Auto,
        end: Auto,
    },
    grid_column: Line {
        start: Auto,
        end: Auto,
    },
}
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967298)): Style {
    display: Block,
    overflow: Point {
        x: Visible,
        y: Visible,
    },
    scrollbar_width: 0.0,
    position: Relative,
    inset: Rect {
        left: Auto,
        right: Auto,
        top: Auto,
        bottom: Auto,
    },
    size: Size {
        width: Length(
            100.0,
        ),
        height: Length(
            100.0,
        ),
    }, // <--------------------------
    min_size: Size {
        width: Auto,
        height: Auto,
    },
    max_size: Size {
        width: Auto,
        height: Auto,
    },
    aspect_ratio: None,
    margin: Rect {
        left: Auto,
        right: Auto,
        top: Auto,
        bottom: Auto,
    },
    padding: Rect {
        left: Length(
            0.0,
        ),
        right: Length(
            0.0,
        ),
        top: Length(
            0.0,
        ),
        bottom: Length(
            0.0,
        ),
    },
    border: Rect {
        left: Length(
            0.0,
        ),
        right: Length(
            0.0,
        ),
        top: Length(
            0.0,
        ),
        bottom: Length(
            0.0,
        ),
    },
    align_items: None,
    align_self: None,
    justify_items: None,
    justify_self: None,
    align_content: None,
    justify_content: None,
    gap: Size {
        width: Length(
            0.0,
        ),
        height: Length(
            0.0,
        ),
    },
    flex_direction: Row,
    flex_wrap: NoWrap,
    flex_basis: Auto,
    flex_grow: 0.0,
    flex_shrink: 1.0,
    grid_template_rows: [],
    grid_template_columns: [],
    grid_auto_rows: [],
    grid_auto_columns: [],
    grid_auto_flow: Row,
    grid_row: Line {
        start: Auto,
        end: Auto,
    },
    grid_column: Line {
        start: Auto,
        end: Auto,
    },
}
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967299)): Style {
    display: Block,
    overflow: Point {
        x: Visible,
        y: Visible,
    },
    scrollbar_width: 0.0,
    position: Relative,
    inset: Rect {
        left: Auto,
        right: Auto,
        top: Auto,
        bottom: Auto,
    },
    size: Size {
        width: Length(
            100.0,
        ),
        height: Length(
            100.0,
        ),
    },
    min_size: Size {
        width: Auto,
        height: Auto,
    },
    max_size: Size {
        width: Auto,
        height: Auto,
    },
    aspect_ratio: None,
    margin: Rect {
        left: Auto,
        right: Auto,
        top: Auto,
        bottom: Auto,
    },
    padding: Rect {
        left: Length(
            0.0,
        ),
        right: Length(
            0.0,
        ),
        top: Length(
            0.0,
        ),
        bottom: Length(
            0.0,
        ),
    },
    border: Rect {
        left: Length(
            0.0,
        ),
        right: Length(
            0.0,
        ),
        top: Length(
            0.0,
        ),
        bottom: Length(
            0.0,
        ),
    },
    align_items: None,
    align_self: None,
    justify_items: None,
    justify_self: None,
    align_content: None,
    justify_content: None,
    gap: Size {
        width: Length(
            0.0,
        ),
        height: Length(
            0.0,
        ),
    },
    flex_direction: Row,
    flex_wrap: NoWrap,
    flex_basis: Auto,
    flex_grow: 0.0,
    flex_shrink: 1.0,
    grid_template_rows: [],
    grid_template_columns: [],
    grid_auto_rows: [],
    grid_auto_columns: [],
    grid_auto_flow: Row,
    grid_row: Line {
        start: Auto,
        end: Auto,
    },
    grid_column: Line {
        start: Auto,
        end: Auto,
    },
}

Output

index.js:428 INFO: TREE
index.js:428 INFO: └──  FLEX COL [x: 0    y: 0    w: 120  h: 285  content_w: 110  content_h: 259  border: l:0 r:0 t:0 b:0, padding: l:10 r:10 t:10 b:10] (NodeId(4294967297) / "6v1")
index.js:428 INFO:     ├──  LEAF [x: 10   y: 26   w: 100  h: 100  content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967299) / "10v1")
index.js:428 INFO:     └──  LEAF [x: 10   y: 159  w: 100  h: 100  content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967298) / "8v1")

Expected

0 replies

bennobuilder · 2024-05-05T06:02:36Z

bennobuilder
May 5, 2024
Author

Ok, I think I found my issue. I set margin to auto 🤦‍♂️

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Layout Calculation Issue on Element Resize? #650

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Layout Calculation Issue on Element Resize? #650

bennobuilder May 3, 2024

Setup

HTML Equivalent

Raw Logs

Replies: 3 comments

bennobuilder May 4, 2024 Author

bennobuilder May 5, 2024 Author

Input

Output

Expected

bennobuilder May 5, 2024 Author

bennobuilder
May 3, 2024

bennobuilder
May 4, 2024
Author

bennobuilder
May 5, 2024
Author

bennobuilder
May 5, 2024
Author