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

Flex does not center the node and node does not respond to height change in window. #9841

Closed
Hossein-Noroozpour opened this issue Sep 18, 2023 · 5 comments · Fixed by DioxusLabs/taffy#545
Closed

Flex does not center the node and node does not respond to height change in window. #9841

Hossein-Noroozpour opened this issue Sep 18, 2023 · 5 comments · Fixed by DioxusLabs/taffy#545
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior

Comments

@Hossein-Noroozpour
Copy link

In version "0.11.2"

I wanted to place an image in the centre and keep its height 100% of the window and width proportional to the height (keep the aspect)

This is the equivalent of flex in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .image-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .image {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="image-container">
    <img class="image" src="../assets/ui/main-menu.png" alt="Image">
</div>
</body>
</html>

but the behaviour in Bevy is different:

use bevy::prelude::*;

fn setup_camera(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());
}

fn setup_ui(mut commands: Commands, asset_server: Res<AssetServer>) {
    commands
        .spawn(NodeBundle {
            style: Style {
                height: Val::Vh(100.0),
                display: Display::Flex,
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..default()
            },
            ..default()
        })
        .with_children(|parent| {
            parent.spawn(ImageBundle {
                style: Style {
                    height: Val::Percent(100.0),
                    width: Val::Auto,
                    ..default()
                },
                image: UiImage::new(asset_server.load("ui/main-menu.png")),
                ..default()
            });
        });
}

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup_camera)
        .add_systems(Startup, setup_ui)
        .run();
}
@Hossein-Noroozpour Hossein-Noroozpour added C-Bug An unexpected or incorrect behavior S-Needs-Triage This issue needs to be labelled labels Sep 18, 2023
@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 Sep 18, 2023
@alice-i-cecile
Copy link
Member

Can you reproduce this on this branch? #9637

@nicoburns
Copy link
Contributor

nicoburns commented Sep 18, 2023 •
edited

I can reproduce this on top of #9637 (I have to add width: Val::Vw(100.0), to the outer node to account for the changes in #9637 and make the outer node fill the width of the screen).

Adding an explicit aspect_ratio: Some(1.0) style on the ImageBundle entity (replace 1.0 with the actual aspect ratio of your image) produces the behaviour which I believe you want / are expecting. But for some reason the image's inherent aspect ratio doesn't seem have any effect on it's final size/position.

@nicoburns
Copy link
Contributor

nicoburns commented Sep 18, 2023 •
edited

Hmm... interestingly it also does seem to work if the parent node is Display::Grid (with justify_items: JustifyItems::Center, set). Possibly we ought to add some image-based tests to Taffy (gentests with a measure function that acts like an <img> element with regard to aspect-ratio).

This was referenced Oct 2, 2023
Merged
Merged
@nicoburns
Copy link
Contributor

This is indeed a Taffy bug. Fix incoming.

@nicoburns
Copy link
Contributor

@Hossein-Noroozpour Taffy v0.3.14 has been released with a fix for this issue. You can get the fix by running cargo update.

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

Successfully merging a pull request may close this issue.

Pass cross-axis known_dimension when computing flex item min size nicoburns/taffy
3 participants
@nicoburns @alice-i-cecile @Hossein-Noroozpour