- Edited
I'm having trouble understanding how hbox/vbox containers perform layout on controls. I've read the docs, I've done several tutorials, and yet when I try to use containers to achieve my own designs, it never works the way I think it should.
Example: Let's say I want to have 2 rows of controls, and for simplicity let's make all the controls labels, so I want something like this:
label 1 label 2
label 3 label 4
(I know I could use a grid layout, but I'm trying to understand hbox/vbox interactions)
So I create a scene tree like so:
Everything works as expected. But if I instead nest the labels inside their own controls, then the labels all align centered at the top of the main window
What do I need to do to make this scene look like the first one?
Simple example: (I would have uploaded the .tscn file, but that's not allowed)
[gd_scene format=3 uid="uid://bjvtascd4ur64"]
[node name="Control" type="Control"]
layout_mode = 3
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
[node name="VBoxContainer" type="VBoxContainer" parent="."]
layout_mode = 1
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
[node name="Control" type="Control" parent="VBoxContainer"]
layout_mode = 2
[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/Control"]
layout_mode = 1
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
[node name="Label" type="Label" parent="VBoxContainer/Control/HBoxContainer"]
layout_mode = 2
text = "label 1"
[node name="Label2" type="Label" parent="VBoxContainer/Control/HBoxContainer"]
layout_mode = 2
text = "label 2"
[node name="Control2" type="Control" parent="VBoxContainer"]
layout_mode = 2
[node name="HBoxContainer" type="HBoxContainer" parent="VBoxContainer/Control2"]
layout_mode = 1
anchors_preset = 15
anchor_right = 1.0
anchor_bottom = 1.0
grow_horizontal = 2
grow_vertical = 2
[node name="Label3" type="Label" parent="VBoxContainer/Control2/HBoxContainer"]
layout_mode = 2
text = "label 3"
[node name="Label4" type="Label" parent="VBoxContainer/Control2/HBoxContainer"]
layout_mode = 2
text = "label 4
"