# StackPanel at Bottom-Center **URL:** \ **Category:** Questions\ **Created:** [January 8, 2019, 3:57am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623 "2019-01-08T03:57:02Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Subrahmanya\_Chakrava](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/subrahmanya_chakrava/32/3313_2.png) [@Subrahmanya\_Chakrava](https://forum.babylonjs.com/u/Subrahmanya_Chakrava)\ **Post date:** [January 8, 2019, 3:57am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/1 "2019-01-08T03:57:02Z")
Hi, I am trying to place a stackpanel at the bottom-center but it is not working. Please help me. Thanks in advance. PG: [https://www.babylonjs-playground.com/#4P8PJY#9](https://www.babylonjs-playground.com/#4P8PJY#9) ---
**Author:** ![trevordev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/trevordev/32/16_2.png) [@trevordev](https://forum.babylonjs.com/u/trevordev)\ **Post date:** [January 8, 2019, 6:05pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/2 "2019-01-08T18:05:10Z")
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](https://github.com/BabylonJS/Babylon.js/issues/5671) 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](https://www.babylonjs-playground.com/#4P8PJY#10) ---
**Author:** ![trevordev](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/trevordev/32/16_2.png) [@trevordev](https://forum.babylonjs.com/u/trevordev)\ **Post date:** [January 11, 2019, 12:48am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/3 "2019-01-11T00:48:33Z")
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. ---
**Author:** ![Subrahmanya\_Chakrava](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/subrahmanya_chakrava/32/3313_2.png) [@Subrahmanya\_Chakrava](https://forum.babylonjs.com/u/Subrahmanya_Chakrava)\ **Post date:** [January 11, 2019, 4:27am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/4 "2019-01-11T04:27:12Z")
ok. Thank you ---
**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\ **Post date:** [December 20, 2022, 9:13pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/5 "2022-12-20T21:13:58Z")
Some how I missed this - the stack panel height is by default 100% of the screen? ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [December 20, 2022, 9:56pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/6 "2022-12-20T21:56:44Z")
I think it by default takes the available space in the parent container but @carolhmj could confirm. ---
**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\ **Post date:** [December 21, 2022, 12:19am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/7 "2022-12-21T00:19:20Z")
Ah okay, good to know! ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 21, 2022, 2:30pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/8 "2022-12-21T14:30:49Z")
Checked here and currently it is 100% width and 0px height ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [December 21, 2022, 8:58pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/9 "2022-12-21T20:58:39Z")
ohhhh lol I was infinitely wrong 🙂 ---
**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\ **Post date:** [December 22, 2022, 1:38am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/10 "2022-12-22T01:38:08Z")
@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? ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [December 22, 2022, 10:16am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/11 "2022-12-22T10:16:11Z")
> [@carolhmj](#): > > Checked here and currently it is 100% width and 0px height 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. > **[Babylon.js Playground](https://playground.babylonjs.com/#XCPP9Y%2316925)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [December 22, 2022, 10:30am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/12 "2022-12-22T10:30:05Z")
> [@arcman7](#): > > Prior to specifying the height, it would just stay exactly in the middle of the screen Hum. You sure? I don’t think so or I must have missed something (which is quite possible of course 😁 😉 > **[Babylon.js Playground](https://playground.babylonjs.com/#XCPP9Y%2316926)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes **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. > **[Babylon.js Playground](https://www.babylonjs-playground.com/#4P8PJY%23105)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 22, 2022, 12:02pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/13 "2022-12-22T12:02:26Z")
oooh lemme take a look ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 22, 2022, 12:02pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/14 "2022-12-22T12:02:29Z")
Assigned @carolhmj on December 22, 2022, 12:02pm UTC ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 22, 2022, 6:40pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/15 "2022-12-22T18:40:44Z")
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)](https://playground.babylonjs.com/#8G7RKT#1) ---
**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\ **Post date:** [December 24, 2022, 11:01am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/16 "2022-12-24T11:01:07Z")
@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](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. ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [December 24, 2022, 11:10am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/17 "2022-12-24T11:10:02Z")
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. > **[Babylon.js Playground](https://playground.babylonjs.com/#8G7RKT%232)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes 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 > **[Babylon.js Playground](https://www.babylonjs-playground.com/#4P8PJY%23106)** > > Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes @carolhmj @arcman7 Again, my apologies for the confusion and have a great Xmas everyone 🎄 ---
**Author:** ![arcman7](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/arcman7/32/20249_2.png) [@arcman7](https://forum.babylonjs.com/u/arcman7)\ **Post date:** [December 26, 2022, 1:10am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/18 "2022-12-26T01:10:31Z")
> 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! ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [December 26, 2022, 8:19am UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/19 "2022-12-26T08:19:03Z")
> [@arcman7](#): > > This is a perfect summary! It would have been better without all the confusion around it at first, but …thanks. Glad it helped and enjoy your Season Holidays 🕶 ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [December 26, 2022, 12:17pm UTC](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623/20 "2022-12-26T12:17:45Z")
@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! 😁 [Next page](https://forum.babylonjs.com/t/stackpanel-at-bottom-center/623.md?page=2)