Items inside VBoxContainer won't line up

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By pferft

Hi everyone,

in this Node-structure


  • Sprite
    – ScrollContainer
    — VBoxContainer

there is a row of vertically lined up children in the VBoxContainer, like Labels, Sprites and Buttons.
The problem is that how ever I position them vertically in the Editor, they overlap when running the program, not appearing in their supposed position at all. Any ideas what I might be missing here?

:bust_in_silhouette: Reply From: senkai

I’ve tried your node configuration and after modifying it, it worked as expected.

A couple of things you need to do know about the control nodes:

  • A Control Node needs to have a parent which inherits from control so it’ll be able to work correctly.

  • They don’t expand when a parent Isn’t a control node, so this might be an issue for you.

First of all, I would try setting the scroll container as a child of the Control Root instead of a sprite, then expand the container as It’ll reset in size.
Once you’re done be sure that the VboxContainer children are textureRects and not sprites.

Thanks for your quick answer!

I removed the Sprite.
It appears that changing a Sprite-type inside the VBoxContainer to textureRect at least puts the next item in line (a Label) into position right underneath (although I still can’t move it “manually”).
The Control node in my configuration actually is a child and grand child and grand grand child of several Node2Ds deep within the tree… could this be an issue?

It appears that as children of ControlNodes (or Node2Ds as well) I can move Labels and Buttons etc. around and position them within the VBoxContainer as I like. However, they won’t “automatically string” anymore, like when I add text, all the other items to be pushed down accordingly…
(But I wonder why can’t I move a Label around as a direct child of and within a VBoxContainer? It seems like I have to choose between “automatically stringing” and “manually positioning” but can’t have both, which is a pity really.)

pferft | 2022-11-18 20:48

Right now it’s not the problem, the children can’t be moved because if you try to, It’ll tell you right away that children of containers have their POSITION determined by the parent.

The VboxContainer as the name implies, orders the children vertically starting from the top left. Thought what is it that you’re trying to achieve with this container in particular?

senkai | 2022-11-18 21:38

The whole thing is a popup window to scroll through containing all kinds of text, icons, buttons and checkboxes, some of which need to be horizontally next to each other. So I guess what I’m trying to achieve is setting up some “clusters” of several nodes while the VBoxContainer should align these clusters vertically.

As you mention that the position of the container’s children is determined by the parent: in the editor I can move them around and see the x and y coordinates change, but this obviously does not position them relatively to the parent’s position when running the program - they’ll all be put overlapping to the upper left. Isn’t there any way to position a child node relative to a VBoxContainer parent?

pferft | 2022-11-18 21:58