# GUI button alignment?

**URL:** <https://forum.babylonjs.com/t/gui-button-alignment/59974>\
**Category:** Questions\
**Tags:** gui\
**Created:** [August 9, 2025, 7:02am UTC](https://forum.babylonjs.com/t/gui-button-alignment/59974 "2025-08-09T07:02:58Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Petros\_Pap](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/petros_pap/32/47817_2.png) [@Petros\_Pap](https://forum.babylonjs.com/u/Petros_Pap)\
**Post date:** [August 9, 2025, 7:02am UTC](https://forum.babylonjs.com/t/gui-button-alignment/59974/1 "2025-08-09T07:02:58Z")

</div>

Hello!

I try to align buttons left and right on StackPanel() but cannot make them work

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#4P8PJY%23122)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

what i do wrong?

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [August 9, 2025, 10:47am UTC](https://forum.babylonjs.com/t/gui-button-alignment/59974/2 "2025-08-09T10:47:57Z")

</div>

The only way in a StackPanel is to give space between buttons. You can’t do it with the button itself.

use `panel.spacing = 760;` After the value I guess you can with javascript set it in relation to the width of the screen.

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#4P8PJY%23123)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Otherwise don’t use a StackPanel and it will work 🙂

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#4P8PJY%23124)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

Or use a Rectangle instead of StackPanel.

---

<div class="post-metadata">

**Author:** ![Petros\_Pap](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/petros_pap/32/47817_2.png) [@Petros\_Pap](https://forum.babylonjs.com/u/Petros_Pap)\
**Post date:** [August 9, 2025, 11:51am UTC](https://forum.babylonjs.com/t/gui-button-alignment/59974/3 "2025-08-09T11:51:51Z")

</div>

> [@Dad72](#):
>
> Thank you!!

this what i want to do

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#4P8PJY%23126)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

but i got some errors

BJS - [14:46:55]: Control (Name:title, UniqueId:288) is using width in percentage mode inside a horizontal StackPanel 😏

---

<div class="post-metadata">

**Author:** ![Dad72](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/dad72/32/13_2.png) [@Dad72](https://forum.babylonjs.com/u/Dad72)\
**Post date:** [August 9, 2025, 12:21pm UTC](https://forum.babylonjs.com/t/gui-button-alignment/59974/4 "2025-08-09T12:21:34Z")

</div>

adding an ignoreLayoutWarnings to your stackpanel will remove its errors from the console :

`mainpanel.ignoreLayoutWarnings = true;`