How to get text to wrap within bounds of parent container?

[teal umbra]

/// spawns a container with a folder icon and some text
pub fn spawn_folder(commands: &mut ChildBuilder, font: &Handle<Font>, icon: &Handle<Image>, name: &str) {
    commands.spawn(NodeBundle {
        style: Style {
            size: Size::new(Val::Px(60.0), Val::Px(80.0)),
            align_items: AlignItems::Center,
            justify_content: JustifyContent::FlexStart,
            flex_direction: FlexDirection::Column,
            margin: UiRect {
                left: Val::Px(2.0),
                right: Val::Px(2.0),
                top: Val::Px(5.0),
                bottom: Val::Px(5.0),
            },
            // flex_wrap: FlexWrap::WrapReverse,
            align_content: AlignContent::FlexStart,
            ..default()
        },
        background_color: Color::rgb(0.15, 0.15, 0.15).into(),
        ..default()
    })
    .with_children(|parent| {
        parent.spawn(CoolButton::new(icon.clone()));
        parent.spawn(NodeBundle {
            background_color: Color::rgb(0.5, 0.5, 0.5).into(),
            style: Style {
                flex_wrap: FlexWrap::Wrap,
                align_content: AlignContent::FlexStart,
                size: Size::new(Val::Percent(100.0), Val::Px(32.0)),
                ..default()
            },
            ..default()
        })
        .with_children(|parent| {
            parent.spawn(TextBundle {
                text: Text::from_section(name, TextStyle {
                    font: font.clone(),
                    font_size: 12.0,
                    color: Color::rgb(0.9, 0.9, 0.9),
                }),
                style: Style {
                    size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                    max_size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                    flex_wrap: FlexWrap::Wrap,
                    align_content: AlignContent::FlexStart,
                    ..default()
               },
               background_color: Color::rgb(0.7, 0.7, 0.7).into(),
                ..default()
            });
        });
    });
}

not really sure what's going on here, it seems no matter what flex settings i try it never works. The light background color under folder image is the container which is the parent of the TextBundle

Code where the function is used:

commands.spawn(Camera2dBundle::default());
    commands
        .spawn(ImageBundle {
            style: Style {
                size: Size::width(Val::Percent(100.0)),
                align_items: AlignItems::FlexStart,
                justify_content: JustifyContent::FlexStart,
                padding: UiRect {
                    left: Val::Percent(5.0),
                    right: Val::Percent(5.0),
                    top: Val::Percent(5.0),
                    bottom: Val::Percent(5.0),
                },
                ..default()
            },
            image: UiImage {
                texture: wallpaper,
                ..default()
            },
            ..default()
        })
        .with_children(|parent| {
            spawn_folder(parent, &font, &folder_icon, "CoolButton");
            spawn_folder(parent, &font, &folder_icon, "Another Cool Button");
            spawn_folder(parent, &font, &folder_icon, "CoolButton");
            spawn_folder(parent, &font, &folder_icon, "CoolButton Yep yo so yeah hi");
        });

CSS isn't my strong suite...

[half cosmos]

in bevy 10.x text wrapping isn't fully implemented

[teal umbra]

NVM figured it out right after ...

[half cosmos]

you have to specify a Val::Px width constraint on the text node itself to get it to work

[teal umbra]

need to set width ..

[half cosmos]

yep

[teal umbra]

searched through previous issues lol

thanks tho

I guess i don't need the extra parent container

[half cosmos]

it'll be fixed properly with Val::Percent for 0.11

[teal umbra]

ohnice

[half cosmos]

yes the parent won't make any difference

[teal umbra]

while you're still here, do you know if this is this a good way to organize my code? Into functions like this and then spawning at main, or should I make this into a component/bundle somehow?

[half cosmos]

it looks fine to me

that's a pretty common pattern that a lot of people use

FlexWrap has nothing to do with text wrapping, it's only for wrapping of Nodes

like you can spawn 30 100x100 images into a 300x1000 pixel container node