Godot Version
4.3
Question
Hi,
I currently have a VBoxContainer inside my PanelContainer, but have no clue how to resize the VBoxContainer horizontally or vertically.
Help is genuinely appreciated.
The idea of these nodes is that they size themselves. This is so that when the screen size changes they automatically re-adjust.
It takes a while to get used to it, but it is very powerful when you do. You can set a minimum size (width or height) but you use the shrink commands to tell the container how to size, like shrink_left or stretch etc.
In your example, you seem to have your buttons at full width. If you want margins around them use a margin container to add margins left and right. This would make your panel wider for instance.
The ‘shrink’ options makes the container the size required to fit the contents. It all depends on what you want to achieve. I often will have a vbox with margin containers as children to manage different elements, with additional hbox and vbox children in them. You can nest these almost infinitely for fine control.
1 Like
I see!
I added a MarginContainer, but I’m not sure where it should be. Should it be inside the PanelContainer or VBoxContainer?
It can be either, it depends where you want the margins. Inside the panel it will act like padding. Outside the panel it will act like margins. My panels almost always have a margin container as a child to give it some padding for the panel contents. Then you add your vbox as a child of the margin container.
1 Like
Your panel looks nice BTW 
1 Like
This is great! Thank you for the solution!
I’m actually used to the Roblox UI system. I’d use a “node” (element) called UIPadding, and by using pixels I’d distance UI elements from the borders.
Definitely saved me here.
Just one more thing: In the VBoxContainer, how can I size each element automatically so that it fills the VBoxContainer? Let’s set an example.
If we had one button, the button would be filled 100% to the height and width of the VBoxContainer.
If we had two, that’s divided to 50%.
Three is roughly 33% and so on.
- How can I achieve this automatically?
In the inspector you see a checkbox for ‘extend’. This will extend the element to take up all the available remaining space. If you have 3 elements all extended, they will each take up a third. If you had 4, they would take up 4 etc.
1 Like
I can’t find the Extend checkbox. Is it inside VBoxContainer, and it inside a category per se?
The stretch ratio can also be played with but for even spacing leave as 1. If you had two elements, with one a stretch ratio of 2 and the other with 1, the available space would be distributed with those ratios. So one would be 2/3 and the other 1/3. You do not normally need to change this.
PS I meant ‘expand’ not ‘extend’ sorry.
1 Like
I see! Give me a second… Giving solution in a bit
You may not want this styling but if you give your buttons a minimum y value they can be a bit thicker (taller) and rounded corners always looks nice. A simple button setting in the inspector.
1 Like
