Godot Version
4.3
Question
Hey all, I am having issues placing some UI controls correctly near the bottom of the screen. I am using a portrait mode screen (for vertical phone position), and the screen resolution is 720x1280.
In my game, when the player taps on a unit, I want to display some information about that unit near the bottom of the screen. I also want to display an “action sheet” - 4 buttons - that allow the player to take some kind of action with that unit.
However, I only want to display the action sheet for some units. So sometimes I will display the “unit information panel” and the “action sheet”. Other times I will only display the “unit information panel”.
Anyway, this is my desired look:
Unfortunately, I am having trouble getting this. Right now this is the closest I have come:
This is my current node tree:
I have a VBoxContainer positioned at the bottom of the screen. Then, when a unit is selected I will simply add controls to that VBoxContainer. The “GridContainer” as seen in the node tree will contain the 4 action buttons (what I am calling the “action sheet”). The “MarginContainer” in the tree contains some child controls that display information about the selected unit.
If the “GridContainer” action sheet is not present, then the “MarginContainer” correctly sizes itself, so it looks like this:
However, when I add my “action sheet” of 4 buttons, both the GridContainer as well as the MarginContainer extend beyond the width of the screen.
Now, you might say: “this is easy, your buttons are too big. Just scale down your buttons”. Welll, that would be an easy solution if Godot would let me. Right now in the inspector/editor those fields are not available for me to edit (they are read-only). So I cannot edit the size of the buttons or the scale of the buttons. I would love to make the buttons smaller. I just want them to fit the width of the screen.
Here is a short screen-capture video that you can check out to see what properties are set on each of the nodes:
Thanks for any help in advance!