Godot Version
v4.7.stable.official [5b4e0cb0f]
Question
I have UI structured like this:
which is supposed to make things look like this:
The arrow near X is SepX and arrow near Y is SepY
Instead it looks like this:
For some reason VBox with X and SepX IS perfectly fine. But HBox doesnt alight the SepY right completely, instead it has an offset liek this: (separation is set to 4 on both VBox and HBox!!!)
For comparison Vbox looks like this:
The code for separation and everything is here below, but the most strange thing that it looks perfectly correct it does SAME things for SepX and SepY
@tool class_name SizeEdit extends Control
@export_tool_button("Setup ui") var setup_ui_action := Callable(self, "_setup_ui")
## Size of smaller sides
const LINE_SIZE := Vector2(64, 64)
## Size of seperator
const SEPARATOR_SIZE := Vector2(32, 32)
## Separation of Vbox and Hbox
const SPERATION_SIZE: int = 4
## What size of box they take
const LINE_SIZE_COEF := 0.7
@onready var X: LineEdit = %X
@onready var Y: LineEdit = %Y
@onready var ui_panel: UIPanel = %UIPanel
@onready var sep_y: VSeparator = %SepY
@onready var sep_x: HSeparator = %SepX
func _ready() -> void:
_setup_ui()
func _setup_ui() -> void:
_setup_panel()
await get_tree().process_frame
call_deferred("_setup_lines")
call_deferred("_setup_separators")
func _setup_lines() -> void:
var size_x := Vector2(ui_panel.size.x*LINE_SIZE_COEF, LINE_SIZE.y)
X.custom_minimum_size = size_x
X.custom_maximum_size = size_x
var size_y := Vector2(LINE_SIZE.x, ui_panel.size.y*LINE_SIZE_COEF)
Y.custom_minimum_size = size_y
Y.custom_maximum_size = size_y
func _setup_separators() -> void:
var size_x := Vector2(ui_panel.size.x, SEPARATOR_SIZE.y)
sep_x.custom_minimum_size = size_x
sep_x.custom_maximum_size = size_x
sep_x.add_theme_constant_override("separation", int(SEPARATOR_SIZE.y))
var size_y := Vector2(SEPARATOR_SIZE.x, ui_panel.size.y)
sep_y.custom_minimum_size = size_y
sep_y.custom_maximum_size = size_y
sep_y.add_theme_constant_override("separation", int(SEPARATOR_SIZE.x))
func _setup_panel() -> void:
var size_p := Vector2(
size.x - LINE_SIZE.x*2 - SEPARATOR_SIZE.x*2 - SPERATION_SIZE*2,
size.y - LINE_SIZE.y*2 - SEPARATOR_SIZE.y*2 - SPERATION_SIZE*2
)
ui_panel.custom_minimum_size = size_p
Why is it like this??? Im 1000%% sure the separation in both Boxes is 4 and the container sizing seems to be fine too:
Why is it like that???
The AI doesnt seem to undersatnd and help at all, im genuinely going insane because of i dont even know a reason why it behaves like this
In case it might be useful
And I use custom stylebox texture on Hsep and Vsep, I dont know if it can be a reason, but it seems to be fine too
I believe most of your issues are from using Control nodes, you probably donβt want your root node SizeEdit to be a Control, instead some kind of container, similarly your UIPanel probably shouldnβt be a Control node either.
Iβd try using either a GridContainer as the root βSizeEditβ or your VBoxCotainer.
Thank you for answering! Why using Control node is a bad idea?
The UIPanel looks like this:
The panel children just upscale with control node
Code if it matters:
@tool class_name UIPanel extends Control
@export_tool_button("Update visiuals") var update_visuals_action: Callable = Callable(self, "_update")
@export_group("Colors")
@export var background_color: Color = Color("24242b")
@export var border_color: Color = Color("d2dbe3")
@onready var background: Panel = %Background
@onready var border: Panel = %Border
func _ready() -> void:
pass # Replace with function body.
func _update() -> void:
_set_colors()
func _set_colors() -> void:
background.self_modulate = background_color
border.self_modulate = border_color
How would implementing SizeEdit as GridContainer would work?
I can try something like this, where are blank control nodes with 0 size:
But same problem occurs, the arrow just doesnt fit in that HBox for some reason
Control nodes donβt handle the position and scale of their children, Containers work best when all their children (up to the last childless node) are also Containers.
Your UIPanel could be one PanelContainer instead, with a bordered stylebox.
Maybe the vertical arrowβs stylebox is the issue, try changing the left/right texture margins and the left/right expand margins.
I handle the scale and position by using anchor presets and code, the size of X, Y, and seperators is calculated via code and their scale and position is calculated via anchors and containers, so it should work probably. But I dont understand how would implementing the root node as Container would even workβ¦
Thank you about UIPanel, you are right, but i think it doesnt change the situation in SizeEdit
I think there might be something wrong with arrow texture, i will try changing it to something else;
i changed seperators to be panels in case it changes something and i had to change their minimum size to 64 cause of it, and the gap seemed to be smaller.
I tried tweaking texture/expand margins, nothing seems to work, i tried changing texture to other arrow texture and tweaked valeus again and nothing worked, the arrow on the up works perfectly fine - i can do literally anything and it still stays in place - the arrow on left, on the other hand, doesnt change anything completely, the gap remains there for literally no reason, i have no idea why its like that, im going insane.
thats my solution for now, i ltierally have no idea why it didnt work before, BUT WITH CONTROL NODE IT WORKS, BUT NOT WITH THAT PANEL, BUT IDK WHATS WRONG LITERALLY
wrong picture, correct one:
