How to Make VBoxContainer Children Look Correct?

[Fulcrum-19]

Godot Version

4.5

Question

I’m making a UI system that has editable tabs. I recently discovered the magic of containers to make the nodes work better with each other. However, I can’t seem to figure out how to make them look correct when putting them into a VBoxContainer.

Tab

Main Scene

As you can see, the tab scene has all of the components visible, but when putting them into a VBoxContainer, they become compressed. I want them all to be the same size when putting them into the container.

[gertkeno]

You do have a Panel named “Base” that breaks the container chain, seems like you could remove that “Base” panel, and/or use a HBoxContainer. Maybe instead of a TextEdit a LineEdit would be more appropriate too.

[Fulcrum-19]

This is working a lot better now, but I’m wondering if there’s any way to make them look a little taller? I’d like them to be around the same size of the buttons.

Tab

Main Scene

In-Game

[gertkeno]

Similarly your Remove button is interrupted by a non-container “Base”

I would set up this scene only using containers, you could add the HSplitContainer as a parent of the two line edits if you really want it, but it seems strange to me.

[Fulcrum-19]

Okay, I’ve settled on a layout that I am almost happy with. It works great, but the button isn’t the length I’d like it to be. It seems to be based off of the font size, and the only way I could find to make it longer was to add spaces to the button text, but I’d like it to be a 1:1 ratio with length and height.

[Fulcrum-19]

I found a way to make this happen. What I did was use another HSplitContainer instead of an HBoxContainer, then disabled it. I then set the split offset through code based on the vertical size of the margin container and it’s margins. I have a feeling there’s an easier way to go about this, but this is the sure solution to my problem.

@onready var text_button_split: HSplitContainer = $"Text Button Split"

func _process(_delta: float) -> void:
	# Makes the button a 1:1 size ratio.
	text_button_split.split_offset = -(int(size.y) - (get_theme_constant("margin_bottom") + get_theme_constant("margin_top")))

Main scene:

Final product in-game: