Hi,
I am trying to place a stackpanel at the bottom-center but it is not working.
Please help me.
Thanks in advance.
This looks like a bug, I will fix it as part of this issue Turn useInvalidateRectOptimization on by default · Issue #5671 · BabylonJS/Babylon.js · GitHub
It appears to be working in the stable version of babylon so you can use that or disable gui optimization and force height for now:
https://www.babylonjs-playground.com/#4P8PJY#10
1 Like
Hey, sorry for the delay.
After looking into this more, it looked like the old behavior was incorrect. In your example, the stack panels height is 100% by default so setting its verticalAlignment shouldn’t move it, that is why setting its height to 40px in the playground I sent made it move down.
1 Like
ok. Thank you
Some how I missed this - the stack panel height is by default 100% of the screen?
I think it by default takes the available space in the parent container but @carolhmj could confirm.
1 Like
Ah okay, good to know!
Checked here and currently it is 100% width and 0px height
2 Likes
ohhhh lol I was infinitely wrong 
1 Like
@carolhmj I’m a little confused 
It made sense to me that the height was by default 100% of the vertical space available, because when I used the vertical alignment bottom setting, it did not have an effect on the stack panels positioning until I set the stack panel height to be 40px. Prior to specifying the height, it would just stay exactly in the middle of the screen - why is is that would be the case if its height were 0px?
If I can allow myself, from my (small) experience: Actually, it is of 100% width and, if no specified height, it is of ‘no height’ (which is equal to 0) EXCEPT that it resizes from the height of the children AND takes no height of the parent container if it has no children.
Hum. You sure? I don’t think so or I must have missed something (which is quite possible of course 
Edit: Apologies, now I went to the original PG from the poster and I think I understand what you mean. If you set isVertical = false, you cannot stack and resize from the children in the same way. Not really a bug but rather a restriction that could eventually be improved/removed? It’s kind of logical because it has a default width of 100% (as opposed to the no-height), so all items are staking under each other because the width is already at 100%.
In this case I would just not use the isVertical and either create a grid or stack more panels in the container horizontally.
@carolhmj I still think there is actually some BUG to be fixed. If you set isVertical and you give instructions for alignment, they are simply ignored. However, if you go through the inspector and set i.e Horizontal alignment to the right, the job is done and the item is placed correctly.
1 Like
oooh lemme take a look
1 Like
Hmmm I tried looking at the playground, and it doesn’t look like to me that isVertical is making it ignore alignment. I have this example with two panels, the yellow one has isVertical false, and the red one has it true. And both of them are responding to alignment correctly, both their own alignment and their children’s alignment. Is there anything I missed here? GUI Alignments | Babylon.js Playground (babylonjs.com)
1 Like
@mawa @carolhmj I’m finally flying back to Austin in 8 hours, where I have my main dev setup. But as @maya mentioned it’s that original pg link https://www.babylonjs-playground.com/#4P8PJY#9 where I first noticed the behavior, and then I realized that was the case in my own app in a few places.
You cheated a little, didn’t you?
The problem occurs when you have more than 1 child.
The vertical (default) stackpanel allows you to stack the controls, which basically is the purpose I believe. Problem is the horizontal stackpanel does not seem to stack controls horizontally. The height is always accounted and even if the total width of the controls is smaller than the width of the panel, they still don’t stack horizontally without being pushed down from their height.
Edit: My apologies. Didnt’ realize you set the isVertical to true in your PG. So, I guess it works.
Lemme just return to this original PG and for the time being forget about the above until I return to you…
EDIT2: OK, now I get it (finally). Forget all of the above. 
I have been misguided by the content and forth and back. My bad. 
The answer is if the panel is horizontal with no specified height, the panel covers 100% height of the parent. Same as the vertical panel also covers 100% width of the parent. It’s actually normal and expected behavior I believe. So if you want to stack items horizontally, you need to give the height (likely corresponding to the height of the children you want to stack horizontally).
@Subrahmanya_Chakrava
Here is your revised PG
@carolhmj @arcman7 Again, my apologies for the confusion and have a great Xmas everyone 
1 Like
The answer is if the panel is horizontal with no specified height, the panel covers 100% height of the parent. Same as the vertical panel also covers 100% width of the parent. It’s actually normal and expected behavior I believe. So if you want to stack items horizontally, you need to give the height (likely corresponding to the height of the children you want to stack horizontally).
This is a perfect summary! Thank you for taking the time to distill it from the thread.
Merry Christmas, from Austin!
2 Likes
It would have been better without all the confusion around it at first, but …thanks. Glad it helped and enjoy your Season Holidays 
@mawa thank you very much for the summary, and I agree that it’s perfect! May I add it to the documentation? 
And (late) Merry Christmas, from Brazil!
1 Like