About rect_size and rect_min_size properties

I apologize for creating a topic on what is probably obvious to many but i noticed something curious that i cannot explain while setting up the slideshow scene.

At one point, we set the minimal size (i.e rect_min_size property) of the Label node to 140 pixels in height which gives that result:

The box of the label is now bigger and the next child of the VBoxContainer, which is the Button node, follows vertically. That makes perfect sense. But here is what happens when i set the size (i.e rect_size property) of the Label to 140 pixels in heigth:

The Button node doesn't seem to respect the Label's box and i don't understand why because even if the Label node can now be resized to less than 140 pixels (since there's no more minimal size) its size is still the same (i.e 140 pixels) and so both nodes being nested in a VBoxContainer i would have thought the Button would be place right after the Label but outside its box.

One thing i noticed is that setting the min_rect_size property automatically adjust the rect_size property (again, makes perfect sense) so i suspect the problem when changing the rect_size property comes from the min_rect_size property being set to 0.

Sorry if i'm not clear (english isn't my first language). Again the explanation is probably simple and not that important anyway. If possible, i would just like to know how it works because being from a CSS background i can't really wrap my head around this one.

1 love
  • Nathan Lovato replied

    What is happening here is that we are using a container as a parent of the two nodes. Containers take control of their children's sizes. When you change the size of a node inside of a container, the container ignores that. The bounding box of your node updates temporarily, but if you toggle the visibility or change its order in the scene, you will see it gets resized by the container.

    However, if you change the minimum size, then the container will respect that.

    User interface systems in desktop applications often work more or less like this, and they work differently from HTML and CSS. It's not the same box model. In this course, we mostly scratch the surface. Godot's UI system needs a dedicated course if you want to master it.

    However, we're waiting for Godot 4 and its redesigned editor UI to teach the system more in-depth because the new user experience in the editor is much more accessible and intuitive in Godot 4.

    2 loves
  • joan_fase replied

    Thanks a lot for the quick and detailed explanation! GdScript being somewhat similar to JavaScript and Control Nodes having margin but also vertical and horizontal alignements i wrongly assumed that UI in Godot worked the same way as CSS. Clearly my mistake here. Again, thanks to clarify it. This course has amazing content and you guys do an incredible job at elaborating it!

    1 love
  • Nathan Lovato replied

    Glad this helped, and I'm glad you're enjoying the course so far!