Making margins fully collapsable, before resizing center-aligned UI element

Help UI
,
1

Godot Version

4.4

Question

Hey, Godot UI people. Can you help me out with some trouble I’m having, with a responsive pixel art layout?

I’m working on a UI that can handle both vertical and horizontal orientations, and various resolutions. I come from a CSS/HTML background and can do a lot in that, and have a decent familiarity with Godot’s container elements… but I’m having some issues creating a center-aligned, resizable hotbar as part of the UI.

Here’s what I’m trying to achieve, and how I’m trying to do it:

GodotUIMockup
GodotUIMockup1356×577 34 KB

The hotbar is a Grid Container full of an arbitrary number of cells for an adjustable number of icons. I’ve got the cyan margins set to expand and center the hotbar grid fine. Now, I want the cyan margins to collapse fully, before resizing the hotbar in the center if the screen width is too small… but the hotbar resizing behavior is inconsistent depending on whether I’m in Editor or running the game.

In the editor, the margins collapse as expected, but the hotbar doesn’t resize, as seen here:

Meanwhile, when running the game (with the Display>Window>Stretch set to stretch the Viewport, and Expand) the hotbar shrinks before the margins collapse, as seen here:

I’ve tried other approaches with other containers, but whatever I do I can’t get the hotbar grid container to resize when the margins have collapsed completely, before the hotbar element collapses, and I can’t tell why. Is there some approach that I’m missing, or is this not possible without coding a custom Container?

Any help or suggestions of other approaches would be very appreciated. Thanks!

2

I’m really just guessing here:

I’d imagine that the resizing is being controlled under the hood by signals , and godot doesn’t guarantee of which node receives a signal first. You could get around it by coding the resize stuff yourself, which is annoying, but will force the program to do what you want.

I’d try something like, if the width of the screen is >= the width of the hotbar, the hotbar.custom_minimum_size.y = whatever you want to lock the hot bar height to. If the screen width is < the hotbar, you decrease custom_minimum_size.y, perhaps using remap?