# Control is using height in percentage mode inside a vertical StackPanel Warnings after update to 6.25.0

**URL:** <https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071>\
**Category:** Bugs\
**Created:** [October 20, 2023, 2:37pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071 "2023-10-20T14:37:09Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vorion](https://avatars.discourse-cdn.com/v4/letter/v/d26b3c/32.png) [@Vorion](https://forum.babylonjs.com/u/Vorion)\
**Post date:** [October 20, 2023, 2:37pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/1 "2023-10-20T14:37:09Z")

</div>

Hi,  
after updating babylonjs from 6.24.0 to 6.25.0 I’m getting some warnings in the console:  
Control (Name:text1, UniqueId:101) is using height in percentage mode inside a vertical StackPanel  
I’m using resizeToFit=true, so I think this shouldn’t happen, and it’s only showing after the latest update.  
Looking at the inspector, I can see that the control has a height in pixel and it is also shown correctly on screen.  
Manually setting the height to some random pixel value removes the warning and the real size remains the same.

Here is small playground example with two text blocks inside a vertial stack panel:

> **[Babylon.js Playground](https://playground.babylonjs.com/#51QGVK)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

But setting panel.isVertical = false does not show any warnings:

> **[Babylon.js Playground](https://playground.babylonjs.com/#51QGVK%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Adding another stack panel with text blocks inside also shows the warning for the new stack panel:

> **[Babylon.js Playground](https://playground.babylonjs.com/#51QGVK%232)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Using an older babylonjs version in the playground also doesn’t show the warning.

Is this intended or is it a bug?

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 20, 2023, 9:10pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/2 "2023-10-20T21:10:19Z")

</div>

Let me add @carolhmj our GUI expert to the thread

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [October 23, 2023, 12:30pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/3 "2023-10-23T12:30:03Z")

</div>

So, investigating this matter, what I found out is that in 6.24 this line: [https://github.com/BabylonJS/Babylon.js/blob/965d7f4c38c1dea98011f5e244c5e33b2ff4576f/packages/dev/gui/src/2D/controls/textBlock.ts#L394](https://github.com/BabylonJS/Babylon.js/blob/965d7f4c38c1dea98011f5e244c5e33b2ff4576f/packages/dev/gui/src/2D/controls/textBlock.ts#L394), which sets the size of the GUI to be in pixels when resizeToFit = true, is executed before this line: [https://github.com/BabylonJS/Babylon.js/blob/965d7f4c38c1dea98011f5e244c5e33b2ff4576f/packages/dev/gui/src/2D/controls/stackPanel.ts#L170](https://github.com/BabylonJS/Babylon.js/blob/965d7f4c38c1dea98011f5e244c5e33b2ff4576f/packages/dev/gui/src/2D/controls/stackPanel.ts#L170), which checks if the child container of the panel has a height in percentage mode, while in 6.25 their execution order is inverted, so we check if the child is in percentage BEFORE we set it to pixel.

This check shouldn’t depend on evaluation order anyways, so I’ll add a check for the `resizeToFit`: [Fix stack panel giving a warning for children with resizeToFit. by carolhmj · Pull Request #14452 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/14452)

---

<div class="post-metadata">

**Author:** ![Vorion](https://avatars.discourse-cdn.com/v4/letter/v/d26b3c/32.png) [@Vorion](https://forum.babylonjs.com/u/Vorion)\
**Post date:** [October 27, 2023, 1:45pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/4 "2023-10-27T13:45:38Z")

</div>

Using a vertical stackpanel with adaptHeightToChildren=true and therefore also having a height set in pixels still shows the warning message (see the third playground link of my original post for an example).

---

<div class="post-metadata">

**Author:** ![Vorion](https://avatars.discourse-cdn.com/v4/letter/v/d26b3c/32.png) [@Vorion](https://forum.babylonjs.com/u/Vorion)\
**Post date:** [November 21, 2023, 11:41pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/5 "2023-11-21T23:41:58Z")

</div>

Thanks for the previous fixes, but I think I’ve found another one:

> **[Babylon.js Playground](https://playground.babylonjs.com/#51QGVK%238)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Adding a vertical stackpanel inside another vertical stack panel also shows the warning, although the height of stackpanel2 is set in pixel automatically. This doesn’t happen when both stack panels are set to isVertical=false.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [November 22, 2023, 12:00pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/6 "2023-11-22T12:00:39Z")

</div>



---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [November 27, 2023, 8:34pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/7 "2023-11-27T20:34:59Z")

</div>

Thanks for the careful checking 🙂 I have another PR to address this in a (hopefully) more consistent way: [Better handling of StackPanel layout warning by carolhmj · Pull Request #14549 · BabylonJS/Babylon.js (github.com)](https://github.com/BabylonJS/Babylon.js/pull/14549)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 27, 2023, 8:38pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/8 "2023-11-27T20:38:24Z")

</div>

You are the best @carolhmj

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [December 4, 2023, 12:34pm UTC](https://forum.babylonjs.com/t/control-is-using-height-in-percentage-mode-inside-a-vertical-stackpanel-warnings-after-update-to-6-25-0/45071/9 "2023-12-04T12:34:03Z")

</div>


