What is the best way to position a button (TextureButton) in the right bottom corner with a margin?

Question

What is the best way to position a button (TextureButton) in the right bottom corner with a 100px margin in both directions?

Answer 1

In 2D mode, there's a "Layout" Button on the top. Click on it And select "Bottom right".
Then switch to another node and back to that button so the controls values update in the inspector (a little bug).
The layout button updates the values in "Anchor" and sets them to x=1,y=1. That means that this controls relative to the lower right of its parent container/viewport.

Go to "Rect -> Position" and substract 100 from the position values.
Done

You could also change the values in "Margin" (after setting the Anchor) but then you'd have to set both values accordingly.

When the Screen/Parent is resized then the button will be repositioned to always be 100,100 away from the bottom right.

For more info, read here:
https://docs.godotengine.org/en/3.1/getting_started/step_by_step/ui_introduction_to_the_ui_system.html#place-ui-elements-precisely-with-anchors

Comments

This do not work when running the project, Rect->Position or Margin values are managed by the parent container. On editor, it "works" but there is warning to avoid this that's say modifying values of button is overwritten by parent container layout.

Answer 2

The key thing to understand is that you can't change the button margins or position, this is all managed (and so overwritten) by the parent Container.

You need this scene tree :
Control (Layout Full)
------> MarginContainer (Layout Bottom Right)
-------------> Button

Set the Rect Minimum size of your button.
Set the Margins in Theme Overrides of the Margin Container or let it to 0.