I can't right align the text.

[dolto]

Hello, I'm practicing to get used to writing UI in BEVY.

The UI I want to create is very simple...
I'd like to add a small letter at the top showing the app version and a game title.

I'll ask you right away without the details.

Ignore the title.

Source code

//ellipsis
    with_children(|ppp|{
        ppp.spawn(
            NodeBundle {
                style: Style{
                    width: Val::Px(393.),
                    height: Val::Px(15.),
                    margin:UiRect::all(Val::Percent(0.)),
                    //align_items: AlignItems::FlexEnd,
                    ..default()
                },
                background_color: BackgroundColor(Color::WHITE) ,
                //transform: Transform::from_xyz(win_width/2., win_height, 0.),
                ..default()
            }
        ).
        with_children(|p|{
            p.spawn(
                TextBundle{
                    background_color: BackgroundColor(Color::GOLD),
                    text: Text::from_section(
                        "ver 0.0.1", 
                        TextStyle{
                            font_size: 14.,
                            color: Color::BLACK,
                            ..default()
                        }).with_alignment(TextAlignment::Right),
                    
                    ..default()
                }
            );
        });
//ellipsis

Results

Here I thought it would be right-alignment with ".with_alignment(TextAlignment::Right)"
But it didn't work, and as you can see in the picture, I thought it was a problem because the range of the text box was as large as the text size.

Here's the code I added for that reason.

//ellipsis
    with_children(|ppp|{
        ppp.spawn(
            NodeBundle {
                style: Style{
                    width: Val::Px(393.),
                    height: Val::Px(15.),
                    margin:UiRect::all(Val::Percent(0.)),
                    //align_items: AlignItems::FlexEnd,
                    ..default()
                },
                background_color: BackgroundColor(Color::WHITE) ,
                //transform: Transform::from_xyz(win_width/2., win_height, 0.),
                ..default()
            }
        ).
        with_children(|p|{
            p.spawn(
                TextBundle{
                    style: Style{
                        width: Val::Percent(100.),
                        height: Val::Percent(100.),
                        //align_self: AlignSelf::FlexEnd,
                        
                        ..default()
                    },
                    background_color: BackgroundColor(Color::GOLD),
                    text: Text::from_section(
                        "ver 0.0.1", 
                        TextStyle{
                            font_size: 14.,
                            color: Color::BLACK,
                            ..default()
                        }).with_alignment(TextAlignment::Right),
                    
                    ..default()
                }
            );
        });
//ellipsis

Results

The text remains aligned to the left, even though the text box has increased in size, as you can see below.

I need a solution to this.
Please help me.

[ickshonpe]

Try JustifyContent::End

Text alignment doesn't change the text node's position in the layout, only the text's alignment within the node's bounds.

[dolto]

That's truly amazing.
I didn't even think about using it!
because I read a document on flax that justify doesn't work

Thank you so much.

it work!