bevy_ui align text within parent gui node | Bevy | Page 1

full igloo Mar 30, 2023, 9:25 AM

#

I'm trying to align text within a parent GUI node. The pink is the child node, taking up 100% of the space of the parent node, but the text of this node remains left justified no matter what I do, regardless of the size of the node in which it exists. Changing the Text::alignment field only shifts the kerning a bit, but doesn't seem to actually move the text anywhere within the node

#

So the hierarchy is
Parent node (covered in the screenshot) -> Child node (Pink, contains the TextBundle components)

#

According to flexbox.help

{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    align-content: stretch;
}``` should do it, but instead it does nothing

#

Ah! I had to set the parent's style to column too

storm folio Mar 30, 2023, 9:36 AM

#

yes it's a bit confusing but the text alignment field doesn't affect the position of the text only its internal alignment

full igloo Mar 30, 2023, 9:36 AM

#

Then I actually don't understand what the text alignment field even does

#

I guess that doesn't matter though

storm folio Mar 30, 2023, 9:37 AM

#

if you have a text with multiple lines

#

then left aligned text will be lined up against the left edge, and right aligned text will lined up against the right edge

full igloo Mar 30, 2023, 9:38 AM

#

Okay but then why can't I align a child node within a parent?

storm folio Mar 30, 2023, 9:38 AM

#

within its ui node, but the node containing the text doesn't move

full igloo Mar 30, 2023, 9:38 AM

#

It can take up all the space inside the parent but it seemingly can't be aligned within that space

storm folio Mar 30, 2023, 9:40 AM

#

usually you just need to just need to set either align_items or justify_content depending on the flex direction

full igloo Mar 30, 2023, 9:40 AM

#

Look! It works now!

storm folio Mar 30, 2023, 9:41 AM

#

if you add a background_color to the text node entity it often makes it clearer whats happening

full igloo Mar 30, 2023, 9:41 AM

#

Hmm I wonder if I could shrink the parent to fit its contents

#

That's what the pink was

#

I could take up all the parent's space, but I couldn't actually move the alignment within that space, other than vertically

#

Hmm it seems like I can't actually both make the column grow in width to fit the contents AND make it align to the right side of the screen

#

Maybe with another parent node on top of that in ColumnReverse

storm folio Mar 30, 2023, 9:44 AM

#

that should work

#

there are still bugs in 0.10 with text nodes, often wrapping them in other nodes can help

full igloo Mar 30, 2023, 9:47 AM

#

Hm now the text node disappeared

#

Weird

#bevy_ui align text within parent gui node