GUI - Horizontal alignment in horizontal StackPanel

[maecky]

Hi Guys,

I created a texture for a mesh containing a vertical GUI.StackPanel with a few GUI.TextBlocks in it. These GUI.TextBlocks can be horizontally aligned as expected. Additionally, I added a horizontal GUI.StackPanel to the last row of the vertical GUI.StackPanel. The goal is to add two elements with a width of 35% for each element to this horizontal stack panel. Now I would like to split the horizontal stack panel in a ratio of 50% : 50% and center each element in one of the 50% slots. How can I do that?

I created a minimal example in the playground where I tried to center one element (in this case a GUI.Rectangle) in horizontal stack panel which is inside a vertical stack panel. This doesn't work.

https://www.babylonjs-playground.com/#4P8PJY#5

Does anyone have a clue why this doesn't work and how I can achieve my goal?

Thanks

[Guest]

I would recommend using a Grid now that we have it (:)) for this kind of layout:

http://doc.babylonjs.com/how_to/gui#grid

(You cannot center horizontally inside a horizontal stack panel as the panel will take the content width automatically

[maecky]

Thanks for your answer.

I would like to have the yellow column split into two columns but the rest should stay one column. Is this achievable with a simple grid or do I need to nest a second grid into the yellow row?

https://www.babylonjs-playground.com/#KX33X8#7

Cheers

[Guest]

Yep: https://www.babylonjs-playground.com/#KX33X8#8

 

[maecky]

Awesome!

Thx for the clarification!