# Is it possible to nest GUI elements

**URL:** <https://forum.babylonjs.com/t/is-it-possible-to-nest-gui-elements/17678>\
**Category:** Questions\
**Tags:** gui\
**Created:** [January 21, 2021, 7:18am UTC](https://forum.babylonjs.com/t/is-it-possible-to-nest-gui-elements/17678 "2021-01-21T07:18:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 21, 2021, 7:18am UTC](https://forum.babylonjs.com/t/is-it-possible-to-nest-gui-elements/17678/1 "2021-01-21T07:18:51Z")

</div>

Is there a way to nest GUI elements?  
I am struggling to work out how I can render lines relatively to parent GUI element instead of the window?

Here is sample code (with in-line question in the comment)  
[https://playground.babylonjs.com/#UBGLKW](https://playground.babylonjs.com/#UBGLKW)

Any suggestions please?

---

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 21, 2021, 7:58am UTC](https://forum.babylonjs.com/t/is-it-possible-to-nest-gui-elements/17678/2 "2021-01-21T07:58:13Z")

</div>

I worked out when I am nesting GUI elements with `addControl()` method I don’t need to manually all linked elements to advanced texture. It seems to be working ok.

[https://playground.babylonjs.com/#UBGLKW#1](https://playground.babylonjs.com/#UBGLKW#1)

However, connection line is not rendering until I start moving the object. Is that possible bug or am I missing something again?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 21, 2021, 11:04am UTC](https://forum.babylonjs.com/t/is-it-possible-to-nest-gui-elements/17678/3 "2021-01-21T11:04:44Z")

</div>

The anchor and corner GUI elements need to have been rendered at least one time to have some of their properties computed and for the lines to be correctly displayed.

The easiest way I found is to delay the creation of the multiline GUI element to the next frame:

[https://playground.babylonjs.com/#UBGLKW#3](https://playground.babylonjs.com/#UBGLKW#3)

---

<div class="post-metadata">

**Author:** ![MarkBevels](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/markbevels/32/13799_2.png) [@MarkBevels](https://forum.babylonjs.com/u/MarkBevels)\
**Post date:** [January 21, 2021, 11:25am UTC](https://forum.babylonjs.com/t/is-it-possible-to-nest-gui-elements/17678/4 "2021-01-21T11:25:22Z")

</div>

Oh yes… that makes perfect sense. Gold!  
Thanks a lot @Evgeni_Popov.

I was using above method below GUI performance experiment. It would be amazing if you could have a look. Perhaps there is something I am missing.

> [@Custom GUI labels performance test](https://forum.babylonjs.com/t/custom-gui-labels-performance-test/17676):
>
> Was playing around with GUI trying to work out performance cost for tracking multiple elements on the scene. Here is an example of 200 objects being tracked by multiple GUI elements. I wouldn’t recommend that approach in production, nevertheless it looks satisfying. [https://playground.babylonjs.com/#WC6GET](https://playground.babylonjs.com/#WC6GET) And humble beginnings scene if anyone wants to dig in [https://playground.babylonjs.com/#BHTT8U](https://playground.babylonjs.com/#BHTT8U)