Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

A flex column nested inside a flex row results in unexpected layout calculation #4237

Open
Earthmark opened this issue Mar 17, 2022 · 4 comments
Open

A flex column nested inside a flex row results in unexpected layout calculation #4237

Earthmark opened this issue Mar 17, 2022 · 4 comments
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior

Comments

@Earthmark
Copy link
Contributor

Bevy version

0.6.1

Operating system & version

Windows 11

What you did

I compiled and ran this code (when a valid font)

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup_ui)
        .run();
}

fn setup_ui(mut c: Commands, assets: Res<AssetServer>) {
    c.spawn_bundle(UiCameraBundle::default());

    let style = TextStyle {
        font: assets.load("Karla-VariableFont_wght.ttf"),
        font_size: 50.0,
        ..Default::default()
    };

    let label = |s: &'static str| TextBundle {
        text: Text::with_section(s, style.clone(), Default::default()),
        ..Default::default()
    };

    fn row() -> NodeBundle {
        NodeBundle {
            style: Style {
                flex_direction: FlexDirection::Row,
                ..Default::default()
            },
            color: Color::NONE.into(),
            ..Default::default()
        }
    }

    fn column() -> NodeBundle {
        NodeBundle {
            style: Style {
                flex_direction: FlexDirection::Column,
                ..Default::default()
            },
            color: Color::NONE.into(),
            ..Default::default()
        }
    };

    c.spawn_bundle(row()).with_children(|c| {
        c.spawn_bundle(label("-"));

        c.spawn_bundle(column()).with_children(|c| {
            c.spawn_bundle(label("/"));
            c.spawn_bundle(label("\\"));
        });

        c.spawn_bundle(label("|"));
    });
}

What you expected to happen

I expected a vertically reversed version of this html

<html>

<head>
  <style>
    .row {
      display: flex;
      flex-direction: row;
    }

    .col {
      display: flex;
      flex-direction: column;
    }
  </style>
</head>

<body>
  <div class="row">
    <div>-</div>
    <div class="col">
      <div>/</div>
      <div>\</div>
    </div>
    <div>|</div>
  </div>
</body>

</html>

which looks like this
image

What actually happened

This is what bevy renders
image

The row flex was ignored, and the column goes off the screen. Elements after the column are also missing.

Additional information

If I remove the children of the column, but keep the column itself there the row works fine. It looks like the column having content seems to break the row calculation.
image
@Earthmark Earthmark added C-Bug An unexpected or incorrect behavior S-Needs-Triage This issue needs to be labelled labels Mar 17, 2022
@alice-i-cecile alice-i-cecile added A-UI Graphical user interfaces, styles, layouts, and widgets and removed S-Needs-Triage This issue needs to be labelled labels Mar 17, 2022
@mockersf
Copy link
Member

Do you reproduce that issue with ImageBundle nodes with a specified size instead of the TextBundle?

@Earthmark
Copy link
Contributor Author

Earthmark commented Mar 20, 2022 •
edited
Loading

I added an example using ImageBundle, however I'm not quite sure how to specify the exact size, I think Node has that but I'm uncertain.

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup_ui)
        .run();
}

fn setup_ui(mut c: Commands, assets: Res<AssetServer>) {
    c.spawn_bundle(UiCameraBundle::default());

    let image = |s: &'static str| ImageBundle {
        image: assets.load(s).into(),
        node: Node {
            size: Vec2::new(10.0, 10.0),
            ..Default::default()
        },
        ..Default::default()
    };

    fn row() -> NodeBundle {
        NodeBundle {
            style: Style {
                flex_direction: FlexDirection::Row,
                ..Default::default()
            },
            color: Color::NONE.into(),
            ..Default::default()
        }
    }

    fn column() -> NodeBundle {
        NodeBundle {
            style: Style {
                flex_direction: FlexDirection::Column,
                ..Default::default()
            },
            color: Color::NONE.into(),
            ..Default::default()
        }
    }

    c.spawn_bundle(row()).with_children(|c| {
        c.spawn_bundle(image("icons/outline_north_east_black_24dp.png"));

        c.spawn_bundle(column()).with_children(|c| {
            c.spawn_bundle(image("icons/outline_north_west_black_24dp.png"));
            c.spawn_bundle(image("icons/outline_south_east_black_24dp.png"));
        });

        c.spawn_bundle(image("icons/outline_south_west_black_24dp.png"));
    });
}

This does result in a different behavior though, it appears the row is now invisible.
image

I tried this with all of the children directly under the row,

    c.spawn_bundle(row()).with_children(|c| {
        c.spawn_bundle(image("icons/outline_north_east_black_24dp.png"));
        c.spawn_bundle(image("icons/outline_north_west_black_24dp.png"));
        c.spawn_bundle(image("icons/outline_south_east_black_24dp.png"));
        c.spawn_bundle(image("icons/outline_south_west_black_24dp.png"));

        c.spawn_bundle(column()).with_children(|c| {});

    });

and this result was squished, but did render all 4.
image

EDIT: The icons I used were the diagonal arrow icons from https://fonts.google.com/icons

@Earthmark
Copy link
Contributor Author

It appears this happens specifically when the inner text element has a height of Auto or Unknown.

@Weibye
Copy link
Contributor

Weibye commented Jul 14, 2022

I suspect the answer is yes, but are you able to reproduce the issue using current main?

@doup doup mentioned this issue Mar 10, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Earthmark @alice-i-cecile @mockersf @Weibye