# AdvancedDynamicTexture disappears when adding styles to canvas

**URL:** <https://forum.babylonjs.com/t/advanceddynamictexture-disappears-when-adding-styles-to-canvas/24261>\
**Category:** Bugs\
**Tags:** gui\
**Created:** [October 2, 2021, 3:02pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-disappears-when-adding-styles-to-canvas/24261 "2021-10-02T15:02:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Max\_Neumann](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/max_neumann/32/17114_2.png) [@Max\_Neumann](https://forum.babylonjs.com/u/Max_Neumann)\
**Post date:** [October 2, 2021, 3:02pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-disappears-when-adding-styles-to-canvas/24261/1 "2021-10-02T15:02:14Z")

</div>

Hello,  
I am trying to add text to my mesh following this PG [https://www.babylonjs-playground.com/#XCPP9Y#16](https://www.babylonjs-playground.com/#XCPP9Y#16) and everything works, but when I add styles width and height 100% to the canvas the text disappears.

Anyhow solvable or add styles to the AdvancedDynamicTexture?

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [October 2, 2021, 3:56pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-disappears-when-adding-styles-to-canvas/24261/2 "2021-10-02T15:56:40Z")

</div>

Hey do you have the example of the playground not working. Not entirely sure what you are doing and want some clarification.

---

<div class="post-metadata">

**Author:** ![Max\_Neumann](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/max_neumann/32/17114_2.png) [@Max\_Neumann](https://forum.babylonjs.com/u/Max_Neumann)\
**Post date:** [October 2, 2021, 4:26pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-disappears-when-adding-styles-to-canvas/24261/3 "2021-10-02T16:26:02Z")

</div>

The canvas have a size of 600x400 pixels, when I add CSS styles to fit the whole screen (100% width and height) the AdvancedDynamicTexture behaves different, I don’t know how I can reproduce that in the playground.  
Here you can see how it should work but currently only in the small canvas without resizing it.  
The text is linked to the black sphere.  
 ![1](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/6/36197a192eaf45169abc41a6ac433620b2df8ce5.png)

Applying 33% width and height styles to the canvas shifts the text away depending how far its gone from the camera.  
 ![2](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/b/9bdc532887db1454c98a346e9f4a362b771adb40.png)

Closer to the camera  
 ![3](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/7/a/7a3667e67bbd281d51a41f4658a763563da256a7.png)

---

<div class="post-metadata">

**Author:** ![msDestiny14](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/msdestiny14/32/9572_2.png) [@msDestiny14](https://forum.babylonjs.com/u/msDestiny14)\
**Post date:** [October 2, 2021, 4:38pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-disappears-when-adding-styles-to-canvas/24261/4 "2021-10-02T16:38:13Z")

</div>

Ok! Without seeing any of the code here are a couple of my suggestions…

1. Make sure all of your GUIS are in %
2. There are some settings you can do with the camera to account for screen size adjusting.  
[Cameras | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/cameras)
3. There is a setting on advance texture idealWidth/idealHeight you can set. This works best when I’m using a playground and I want the UI to shrink and grow with the camera.

---

<div class="post-metadata">

**Author:** ![Max\_Neumann](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/max_neumann/32/17114_2.png) [@Max\_Neumann](https://forum.babylonjs.com/u/Max_Neumann)\
**Post date:** [October 2, 2021, 5:23pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-disappears-when-adding-styles-to-canvas/24261/5 "2021-10-02T17:23:18Z")

</div>

Maybe to add:  
It shouldn’t act as a gui, just a label of a player/mesh with the name of it under the mesh.  
Without resizing the canvas the text just follows the mesh and stays always below it without any shifting. After the resize all the shifting happens.  
I just can not understand why this happens.

---

<div class="post-metadata">

**Author:** ![Max\_Neumann](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/max_neumann/32/17114_2.png) [@Max\_Neumann](https://forum.babylonjs.com/u/Max_Neumann)\
**Post date:** [October 2, 2021, 5:38pm UTC](https://forum.babylonjs.com/t/advanceddynamictexture-disappears-when-adding-styles-to-canvas/24261/6 "2021-10-02T17:38:16Z")

</div>

Ok I had to set the idealHeight and idealWidth of the whole AdvancedDynamicTexture to the screen size, thought that would happen automatically.

Thank you for the help!
