Nesting VBoxContainers (like a Tree)

Question

I'm looking to nest VBoxContainers in a tree-like fashion. I know that Tree nodes exist, but it seemed like I could only make buttons, not add content like I want (unless I'm missing something). Right now, I have a nested structure kind of like this:

However, since the inner VBoxContainers aren't respected in each CardChoiceSection's height, the children of each CardChoiceSection overlaps with the parent container's siblings. Ideally I'd want it to look something like this:

But it currently looks like this:

Where the structure should be

• Section 1
  • List (gray panel container)
• Section 2
  • Treasure
    • List
  • Monsters
    • List

Hag

Answer 1

How deep does the tree go? Do you only ever have one sub-section and therefor only one level of indentation or can you have more than one?

One possible solution would be to just fake it and add an empty spacer element that is fully transparent but has a certain width so that it takes some space and indent a sub-section. And then just add as many spacers as there are indentation levels.

Scrofulous

Answer 2

Can you give us a screenshot of your scene tab? Nested vboxes seems to be respecting height for me but I may not be doing what you're doing.

Saucepan

Answer 3

I have no idea if Godot handles this well or if it will perform terribly, but MarginContainers can be used for indenting.

I have a theme set at the root which applies a left margin of 32

Saucepan

Answer 4

I have no idea if Godot handles this well or if it will perform terribly, but MarginContainers can be used for indenting.

Right, that would be another good way to do it.

Scrofulous

Answer 5

Thanks for the suggestions! I'll include a little more information.

I have a CardChoiceSection scene that is laid out like this:

The title bar is fill horizontal and shrink begin vertically, and the ChildrenContainer and Children are both fill (with expand whenever it's possible.

At runtime, these CardChoiceSections are added to the tree with one or multiple CardChoiceSections in the Children VBoxContainer or a single CardChoiceList in Children.

The CardChoiceList looks like this

The Control is fill and expand in both directions and both that and the grid are FullRect anchors.

So imagine my structure is:

• CardChoiceSection (Section 1)
  • CardChoiceList
• CardChoiceSection (Section 2)
  • CardChoiceSection (Treasure)
    • CardChoiceList
  • CardChoiceSection (Monsters)
    • CardChoiceList

The tree would look like this (there is an extra CardChoiceSection wrapping the whole thing, I plan to remove that):

Okay...that was a lot sorry 😛 Hopefully it all makes sense.

Now to my question. I've since realized that my initial question wasn't asking the right thing. The size of the children is being respected (and thanks for the info about the margin container, I've just switched to that!), but the size of the children is always 0. My CardGrid has 8 columns and the sprites inside of it size like so (texture is added at runtime)

However, if our Children only contains a CardChoiceList, the height is 0:

It works perfectly if I set a Custom Minimum Size, but this whole thing is dynamic (things can be added and removed) and in a scroll bar, so I'm a bit confused on how to do that without hard coding a minimum size.

Any info helps, sorry for the extremely drawn-out post!

Hag

Answer 6

so I'm a bit confused on how to do that without hard coding a minimum size.

IMO, you should always have a minimum size, even if just 1 px otherwise why even have the element there at all if it's going to be 0 px?

Caloyer

Answer 7

That's super valid, but I should have clarified that it works perfectly if I set the minimum size to a certain value. Imagine my CardChoiceList grid has 9 items (so 8 on the first row, 9 on the second), then one gets removed. If the minimum height stays the same, there will be a bunch of blank space. But if it's only the height of one row, everything would be either shrunk or cut off.

Hag

Answer 8

Nurseryman Is there any need for the regular Control at the root of CardChoiceList? I have a feeling that if you made CardGrid the root of that scene, your issue would be solved, but I haven't tested that yet.

Saucepan

Answer 9

I originally had GridContainer as the root, but the problem was that it meant Layout Mode was Uncontrolled, and at runtime it got set to Position instead of Anchors. Is there a better way to solve that?

Hag

Answer 10

Doesn't that make no difference if the GridContainer is the child of a VBoxContainer?

If there is another place you are also instantiating the same CardChoiceList scene but without the VBoxContainer parent? If that happens to be the issue, you could make another scene that is just a Control with the childed CardChoiceList scene in it. That way you'd have an option for both needs.

Saucepan

Answer 11

There isn't another place I'm instantiating it. I guess I'm a little confused. I am hoping to find a way where the GridContainer will size itself using the full width of the VBoxContainer and whatever height it needs (say, for 3 rows of cards in the CardChoiceList), then the VBoxContainer would auto-resize whenever necessary (say, when a 3 rows changes to 2 rows).

Hag

Answer 12

If the GridContainer is always only ever the child of a VBoxContainer, then Position vs Anchors doesn't even matter, because its position and sizing is being controlled by the VBoxContainer. I think you just need to set a minimum size for the CardGrid and have that GridContainer as its scene root. Containers automatically respect the sizing of child containers. Having a normal Control in there is what is getting flattened.

Saucepan

Answer 13

That makes sense. I'm unsure how to get the minimum size for the CardGrid, though. I'm pretty unsure of the order stuff works in, so I'm not sure how to do it through code. Since the sizes of the cards within the CardChoiceList are determined by the CardChoiceList, and the minimum size of the CardChoiceList in theory would be a single row of cards (so, determined by the height of the cards), I'm not sure which order I should do things in.

For reference, I have removed the control node and made GridContainer the root of the CardChoiceList scene. Now everything has a height of 1, including the cards.

Thank you so much for your advice by the way!

Hag