# Resize does not work in GUI

**URL:** <https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986>\
**Category:** Questions\
**Created:** [March 19, 2019, 9:24pm UTC](https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986 "2019-03-19T21:24:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lcarlos](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lcarlos/32/1353_2.png) [@lcarlos](https://forum.babylonjs.com/u/lcarlos)\
**Post date:** [March 19, 2019, 9:24pm UTC](https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986/1 "2019-03-19T21:24:28Z")

</div>

## I already tried several browsers! a function: window.addEventListener (‘resize’, function () { engine.resize (); });

it’s working! But the GUI is not a screen that can be used on the screen, but resizing the screen is not combined.

here is my index.html\>  
\<! DOCTYPE html\>

 RTSs html, body { overflow: hidden; width: 100%; height: 100%; margin: 0; fill: 0; }

#renderCanvas {  
width: 100%;  
height: 100%;  
touch action: none;  
}  
\</ style\>  
\</ head\>

## \</ canvas\> \</ body\> \</ html\>

this is the code\>

window.addEventListener (‘DOMContentLoaded’, function () {  
var canvas, motor, scene, camera, light;  
var floor\_1, floor\_2, wall\_1;

canvas = document.getElementById (‘renderCanvas’);  
engine = new BABYLON.Engine (screen, true);

// scene creation function that creates and returns the scene  
var createScene = function () {  
scene = new BABYLON.Cena (engine);  
scene.collisionsEnabled = true;  
camera = new BABYLON.ArcRotateCamera (“camera1”, Math.PI / 2, Math.PI / 4, 3, new BABYLON.Vector3 (0, 0,6, 0), scene);  
camera.attachControl (screen, true);  
camera.lowerRadiusLimit = 2;  
camera.upperRadiusLimit = 82;  
camera.wheelDeltaPercentage = 0.006;  
// (x: 0, y: 5, z: -10)

light = new BABYLON.HemisphericLight (“light1”, new BABYLON.Vector3 (0, 4, 0), scene);  
light.intensity = 1;  
light.specular = BABYLON.Color3.Black ();  
// cfg\_start\_end

// cfg\_path

return scene;

};  
// and\_scene  
var scene = createScene ();  
// execute the render loop  
engine.runRenderLoop (function () {  
scene.render ();  
});  
// the screen / window resizing event handler  
window.addEventListener (‘resize’, function () {  
engine.resize ();  
});

# });

I honestly should not have the code like that, but … the playerground;  
works differently from an index.html page in js linked files.

Can someone help me with this, please? How do I get a GUI to work with rezise!

The code is complete is not complete! And as parts that I found important to show …

---

<div class="post-metadata">

**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:** [March 19, 2019, 10:11pm UTC](https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986/2 "2019-03-19T22:11:17Z")

</div>

How are you setting up your gui, is it with an advanced dynamic texture? If the playground doesn’t work for your repro, could you try to create a js fiddle (eg. [Cube in Babylon.js - JSFiddle](https://jsfiddle.net/aarroyoc/nzexh6a6/)) with your setup?

In this playground you can see the fullscreen gui being updated as expected [https://www.babylonjs-playground.com/#3VMTI9#42](https://www.babylonjs-playground.com/#3VMTI9#42) from the code you shared it looks like it should work to me

---

<div class="post-metadata">

**Author:** ![lcarlos](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lcarlos/32/1353_2.png) [@lcarlos](https://forum.babylonjs.com/u/lcarlos)\
**Post date:** [March 19, 2019, 10:31pm UTC](https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986/3 "2019-03-19T22:31:18Z")

</div>

Hello, Thanks for replying. 🙂

# This is how I move my GUI.

# var advancedTxt = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI (“UI”); var btn\_4 = BABYLON.GUI.Button.CreateSimpleButton (“but1”, “SL”); btn\_4.width = “60px”; btn\_4.height = “60px”; btn\_4.left = “550px”; btn\_4.top = “560”; btn\_4.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAlALIGNMENT\_LEFT; btn\_4.verticalAlignment = BABYLON.GUI.Control.VERTICALALIGNMENT\_TOP; btn\_4.color = “white”; btn\_4.cornerRadius = 20; btn\_4.background = “green”; btn\_4.onPointerUpObservable.add (function () { sw\_unit (); }); advancedTxt.addControl (btn\_4);

---

<div class="post-metadata">

**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:** [March 19, 2019, 10:36pm UTC](https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986/4 "2019-03-19T22:36:30Z")

</div>

Does this playground work as expected?  
[https://www.babylonjs-playground.com/#3VMTI9#44](https://www.babylonjs-playground.com/#3VMTI9#44)

when you manually specify  
btn\_4.left = “550px”;  
btn\_4.top = “560”;

it will always be that many pixels from the top and left

---

<div class="post-metadata">

**Author:** ![lcarlos](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lcarlos/32/1353_2.png) [@lcarlos](https://forum.babylonjs.com/u/lcarlos)\
**Post date:** [March 19, 2019, 10:44pm UTC](https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986/5 "2019-03-19T22:44:36Z")

</div>

## Yes, the playground works! I fix the code \>\> { btn\_4.left = “550px”; btn\_4.top = “560px”;

but the problem still I have also changed the 550px and 560px to 250 and 300 values lower and nothing.

I believe there is to be \>\>  
window.addEventListener (‘DOMContentLoaded’, function () {  
my scene is all inside this key and when I try it puts it in index.html. He does not find the engine.  
}

in the Playground it is not necessary to capture the DOM.

---

<div class="post-metadata">

**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:** [March 19, 2019, 10:59pm UTC](https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986/6 "2019-03-19T22:59:53Z")

</div>

I don’t think I understand. Can you create a jsfiddle that shows the issue?

Are you saying you want to aligned to the right side instead of the left or you want its position to be % based on the width?

---

<div class="post-metadata">

**Author:** ![lcarlos](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lcarlos/32/1353_2.png) [@lcarlos](https://forum.babylonjs.com/u/lcarlos)\
**Post date:** [March 19, 2019, 11:05pm UTC](https://forum.babylonjs.com/t/resize-does-not-work-in-gui/1986/7 "2019-03-19T23:05:44Z")

</div>

I have read the api of babylon and the problem is necessary to define \>\>  
advancedTexture.idealHeight = 360;  
advancedTexture.idealWidth = 640;  
I read the documentation that she really addresses this;  
I do not have a GUI.  
[https://doc.babylonjs.com/how\_to/gui](https://doc.babylonjs.com/how_to/gui)

so that it accompanies the rezie and works correctly! Thanks for answering xD.