Topic was automatically imported from the old Question2Answer platform.
Asked By
Telion
I have a UI structure:
MarginContainer
-> ScrollContainer
-> VBoxContainer
-> UpgradeNodes (list of nodes with fixed min-height)
This works fine rendering the scene as expected, all nodes take full width of the parent with no margins between them and their parent ScrollContainer, while there’s a little margin around it:
The issue is, I want that margin available inside the ScrollContainer, so I tried creating another MarginContainer inside the ScrollContainer and moving everything in it. So new structure would be:
MarginContainer
-> ScrollContainer
-> MarginContainer
-> VBoxContainer
-> UpgradeNodes (list of nodes with fixed min-height)
Now, for some reason, I don’t get what I want. MarginContainer that’s inside the ScrollContainer doesn’t stretch to full width of the ScrollContainer, thus nodes inside get shrinked, the outcome looks like so:
I expected to have some space between the scrollbar and the nodes as well as between the sides of the parent container but I don’t seem to understand to how to achieve that.
MarginContainer
-> ScrollContainer
-> VBoxContainer
-> UpgradeNodes (list of nodes with fixed min-height)
It appears as if your issue may be coming from the min size of your items being added forcing your vbox or margin to change size. Using the above tree of yours, you could add a script to your itemscene that you are instancing with the following code in:
var space_from_bar: int = 30
func _ready():
rect_min_size.x = get_parent().get_parent().rect_size.x - space_from_bar
This will readjust the min size of your items based on the size of your scroll container, and be slightly smaller to provide space in between your items and scroll bar.
I’m curious as to if it possible to achieve the margin without scripting. I wonder how often scripts step in into design part of the games. I assumed scripting should be separated from interacting with UI whenever possible.
As to your explanation I didn’t understand to why you think so.
It appears as if your issue may be coming from the min size of your items being added forcing your vbox or margin to change size.
I don’t have width set on the “UpgradeItem” nodes, only height, so that they could be stretched by the VBoxContainer to its full width. Nothing else has any sizes or width/height’s set up directly, only anchors were used to size and position the elements relatively.
It looks like MarginContainer adapts to button size instead of taking all space of its parent. I thought it has to reference parent instead of its own contents. Button size, though, is also ignored and shrinked to 105/70. Here’s what MarginContainer bounds look like:
You can see it is being shrinked to the size of the button, instead of taking full width of the ScrollContainer seen from here:
Button prefab actually has the width of 400 and is also being shrinked to 105 inside the margin/vbox containers. This looks like it takes the width of the Button’s contents instead of the its size or VBox stretching.
Weird behavior
Telion | 2022-12-26 13:25
Nevermind. I didn’t know I have to set Size Flags for MarginContainer as well. With Fill/Expand size flags MarginContainer now stretches all the way wide as its parent, everything works as intended now.
I didn’t know I have to set Size Flags for MarginContainer as well. With Fill/Expand size flags MarginContainer now stretches all the way wide as its parent, everything works as intended now.
