Set panel location relative to app corner coordinates

I’d like to make a GUI for an app with a stack (or grid, I’m not sure it matters which) of buttons. However, I’d like to set a corner of the stack relative to a corner of the app view. So for instance, I have this example, where I have at least tried to set the stack to the right edge.

However, using panel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT; doesn’t work as expected.


But also, if I can kind of as two questions in one: Suppose that I have a second panel, panel2. I would then like to set the right edge of panel2 to the left edge of panel while keeping their vertical center-lines aligned. (Basically imagine sliding panel2 so that it’s right up against the left edge of panel.) Um … how?

Thanks!

Adding @carolhmj our own Gui Guru

A lot of controls in GUI will fill any available space they are given. In the pg you posted, the stack panel had a default width so it filled the entire region. In that case, it doesn’t really matter if you anchor it.

There are a lot of ways to solve this one. Here is one simple approach.

This example sets the panel to a fixed width, then lets the buttons fill it.

  • Added panel.width = "200px" you could also use a percent here
  • Removed button.width = 0.2; and button2.width = 0.2;

For your second question, you may want to consider a grid instead of a stack panel. You could position the grid just like above, but them fill it with columns and rows as needed

2 Likes