Centering items of a VBoxContainer vertically based on the center item in the container

Help
,
1

Godot Version

4.3

Question

This might be a weird one, but I have a VBoxContainer with a bunch of controls in it.
For argument’s sake, let’s say each item in the container is simply a MarginContainer with some padding, containing a LineEdit.

This VBoxContainer is made in a way, where it will always have an odd number of items in it, meaning, the items count will be 2*n+1, where there are n items at the top and bottom, and a center item.

What I want, is for the items to always be centered in a way, where the middle item doesn’t visibly move.

Now, this already works in the scenario I proposed above, where all the items in the VBoxContainer are essentially the same height. However, there are multiple item types that can be shown at the same time, for instance, say one with a MarginContainer containing a TextEdit with a larger given height, along with the line edit one mentioned above. This will shift the entire interface and throw the middle item off the center of the container visually.

I was wondering if there is some way, which I doubt, because this is a very niche scenario I ended up with, to visually make it so that the item in the middle, stays in the middle.

2

Could you reparent the VBoxContainer to a CenterContainer?

3

Unfortunately not, it’s the same as using a VBoxContainer, given the context

4

Could you post some screenshots of your Scene Tree and what the 2D view looks like?

5

You might try a VBox Container containing the central item and a VBoxContainer on top and bottom. If the actual central item changes, just swap it out.

If that doesn’t work, then try just placing the central item with a VBox container on top and bottom.

6

You’ll need to play with the Control.size_flags_vertical of the elements.

It’s better to show a video:

As long as the top or bottom elements aren’t big enough to push the center element it should work fine.

7

Hello, sorry for the late reply, was busy recently.

Yeah this solution popped into mind before I made this post, just thought I’d ask in case there’s a built-in solution of sorts to this situation.
I ended up implementing the behavior as follows.

Basic Control node contains the whole setup:
A VBoxContainer that only contains the central item, expanded to fill the parent, with alignment set to centered
Two VBoxContainers, one above one below, containing their respective items
When updating the items, I just reposition the two VBoxContainers through code so they are aligned with the center item.

Ended up being pretty simple

1 Like
8

Hello!

Thank you for the showcase.
Your solution is quite clean for the scenario you showcased, but in my case, there might be too many objects to fit.
I ended up implementing a custom solution which you can read in another reply if you’re interested.

Thank you for your time.

9

Hey there, sorry for the late reply.
I ended up implementing a custom solution, feel free to read my reply to the other comments for the explanation.