How do I shrink width/height to fit content?

[mamekoro]

In the following example, I'd like to shrink the height of the TextBundle to fit its content. How can I do this?

This example deals with height, but I would also like to know how to shrink the width of a GUI component.

I'm using Bevy 0.11.0.

use bevy::prelude::*;
use bevy::window::WindowResolution;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                resolution: WindowResolution::new(640.0, 360.0),
                ..default()
            }),
            ..default()
        }))
        .add_systems(Startup, startup)
        .run();
}

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

    let root_node = spawn_root_node(&mut commands);
    let dialog = spawn_dialog(&mut commands);
    commands.entity(root_node).add_child(dialog);
}

fn spawn_root_node(commands: &mut Commands) -> Entity {
    commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Percent(100.0),
                padding: UiRect::all(Val::Px(16.0)),
                ..default()
            },
            ..default()
        })
        .id()
}

fn spawn_dialog(commands: &mut Commands) -> Entity {
    commands
        .spawn(TextBundle {
            text: Text::from_sections([
                TextSection::new(
                    "Alex:\n",
                    TextStyle {
                        font_size: 30.0,
                        ..default()
                    },
                ),
                TextSection::new(
                    "Hi there.",
                    TextStyle {
                        font_size: 30.0,
                        ..default()
                    },
                ),
            ]),
            style: Style {
                // height: todo!(),
                ..default()
            },
            background_color: Color::DARK_GRAY.into(),
            ..default()
        })
        .id()
}

[ickshonpe]

The default behaviour is AlignItems::Stretch which stretches the node to fill the whole cross-axis.
You can either use AlignSelf on the node, or AlignItems on its parent to change it:

fn spawn_dialog(commands: &mut Commands) -> Entity {
    commands
        .spawn(TextBundle {
            text: Text::from_sections([
                TextSection::new(
                    "Alex:\n",
                    TextStyle {
                        font_size: 30.0,
                        ..default()
                    },
                ),
                TextSection::new(
                    "Hi there.",
                    TextStyle {
                        font_size: 30.0,
                        ..default()
                    },
                ),
            ]),
            style: Style {
                align_self: AlignSelf::Start,
                ..default()
            },
            background_color: Color::DARK_GRAY.into(),
            ..default()
        })
        .id()
}

or

fn spawn_root_node(commands: &mut Commands) -> Entity {
    commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Percent(100.0),
                padding: UiRect::all(Val::Px(16.0)),
                align_items: AlignItems::Start,
                ..default()
            },
            ..default()
        })
        .id()
}

[mamekoro]

Thanks, it worked!

[atornity]

oh thank god, I was pulling my hairs out over this earlier. Should Stretch be default here? Baseline feels more appropriate in my (somewhat biased) opinion.

[mamekoro]

Should Stretch be default here?

It seems that stretch is defined as the default value for align-items in the CSS Flexbox specification.

Taffy, Bevy's UI layout engine, follows that specification, so Stretch looks appropriate to me.

[atornity]

Should Stretch be default here?

It seems that stretch is defined as the default value for align-items in the CSS Flexbox specification.

Taffy, Bevy's UI layout engine, follows that specification, so Stretch looks appropriate to me.

Aah, makes sense. I'll just have too keep this in mind for the future then.