How to handle .top and .left in GUI

Hi there,
i’ve developed a scene with a GUI. All work fine but i didn’t perfectly understand how to handle top and left controls properties when i have to set the position inside the canvas.
What is the point taken as refernce: the center of the control i want to place? And at whom are reffered to: the center of the canvas?
For example, if i set control.left = “50%” the meaning is that the center of the control is placed on the right of amount of 50% of its container?

I hope to have made myself as clear as possible.
Thank you.

Pinging @Cedric

The center of the container is at 0% for left and 0% for top.
50% for left will place the control centered to the right of the container.
The point of reference is the center of the control.
See this example PG:
https://www.babylonjs-playground.com/#XCPP9Y#4561

Thank you @Cedric.
So, the only way to set the position reffering to canvas size (for example all aligned in the upper left corner) i have to make calculation with control’s sizes, right? Is there another easy way to do that: for example “align all control to the left” or something similar?

yes, you can use alignment
like in this PG:
https://www.babylonjs-playground.com/#XCPP9Y#4562

2 Likes

Perfect! Exactly what i need. Thanks :+1:

1 Like