BABYLON GUI - add Button to Container

Hi there

2 Questions:
1.
It is possible to add a Button to a container, right? Why is the “button” not added here:
https://www.babylonjs-playground.com/#XCPP9Y#1190

Is there an element that “floats”, meaning gets added below the elements that exists already? Or are all GUI elements in absolute position? I’m asking because i would like to to an interactive menu that changes from model to model…

thanks!

Ping @Deltakosh as it looks weird on: Babylon.js Playground coming from the doc

Definitely a bug!

I will fix that for next commit

Actually not a bug:)

You used a string and not a number for thickness.

Fixed version: https://www.babylonjs-playground.com/#XCPP9Y#1192

For performance reason, we assume you use number as we cannot run type testing on all frames

for question 2: to make an element float, just add it at the root so you can move it with top/left properties

thanks! thought that all GUI settings must be made with strings.

By “float” i mean that for example 4 buttons would just be stacked one after the other like in html. if you add a 5th, it would appear underneath the others…

Maybe you are looking for stackpanel?
https://doc.babylonjs.com/how_to/gui#stackpanel

ah yes great - i thought from reading the manual that grid was kind of it’s replacement. thanks for pointing me towards it

1 Like

Something else i don’t understand:

https://playground.babylonjs.com/#YKSGEW#1

Line 160 & 161:

menuContainerMove.verticalAlignment = BABYLON.GUI.VERTICAL_ALIGNMENT_BOTTOM;
menuContainerMove.horizontalAlignment = BABYLON.GUI.HORIZONTAL_ALIGNMENT_LEFT;

BOTTOM moves it to the top, left align does not work… :confused: ?

BABYLON.GUI.VERTICAL_ALIGNMENT_BOTTOM does not exist

==> BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM

same for horizontal

omg thanks and sorry!

1 Like