How to make everything in an advanced dynamic texture responsive to the window height and width?

In my advancedTexture I have StackPanels that I have used to create side panels and menus in my application. My canvas is already made responsive to the width and height of the window, but I am having trouble making everything in the advanced dynamic texture responsive in this manner as well.

For example when I make the window smaller or change the size of it in general, everything is responsive to this change except the stack panels in my app. So id have the menu and the side panels maintaining their size while the window and the scene and everything in it are changing with respect to the window width and height.

Please does anyone have an idea about this and how I could fix this?

Hi Jad_Matta,

I am…not generally regarded as a purveyor of well-implemented GUIs, :smiley: so it’s probably best to seek advice from our Babylon.js GUI virtuoso, @msDestiny14.

Totally can help with this :wink:

First advice I can offer is to make sure everything is in % . Now this gets a little weird with stack panel since it’s main use is for pixels only. My best recommendation is to use grids instead and you just divide up the sections based on how many objects you want inside it.

If you have a playground with the GUI I’d be happy to take a look at it. Also there is a way to serialize the entre advanceTexture using code. So you export that to a .json file can take a look at that as well.

3 Likes