# GUI StackPanel resizing cuts off text

**URL:** <https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039>\
**Category:** Questions\
**Created:** [May 21, 2020, 9:24pm UTC](https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039 "2020-05-21T21:24:35Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Devin\_Wright](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/devin_wright/32/4302_2.png) [@Devin\_Wright](https://forum.babylonjs.com/u/Devin_Wright)\
**Post date:** [May 21, 2020, 9:24pm UTC](https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039/1 "2020-05-21T21:24:35Z")

</div>

[Playground](https://www.babylonjs-playground.com/#LMGZ6V)

I have a custom class that extends GUI.Rectangle and contains an image and a stack panel [which contains 2 text blocks].

The bottom text block of the stack panel I am allowing to limit the characters, but sometimes the gui doesn’t calculate the height correctly, or there is a race condition, or something. You can get an idea for what I am talking about when you drag the slider at the bottom to some value where the text would go wrap to the next line.

However, if you resize the screen, something seems to fire that causes the text to get resized correctly.

Here is a video of what is occurring.

[![](https://i.ytimg.com/vi/qy7a3lrpKBI/maxresdefault.jpg "BabylonJS GUI Issue") ](https://www.youtube.com/watch?v=qy7a3lrpKBI)

---

<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:** [May 22, 2020, 12:53pm UTC](https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039/2 "2020-05-22T12:53:01Z")

</div>

@Deltakosh will have a look on Tuesday as he is off till then. Sorry to not beeing of more help here ☹

---

<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:** [May 22, 2020, 1:40pm UTC](https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039/3 "2020-05-22T13:40:51Z")

</div>

or maybe @Evgeni_Popov would have a clue 🙂 ?

---

<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:** [May 22, 2020, 2:37pm UTC](https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039/4 "2020-05-22T14:37:42Z")

</div>

I think the problem comes from the fact you update the height of the text blocks in `onLinesReadyObservable`, which is fired **during** the control update process, so those changes don’t trigger the expected redraw/recomputation of the control dimensions.

One simple fix is to postpone the update to the next javascript tick with a `setTimeout(..., 0)`:

[https://www.babylonjs-playground.com/#LMGZ6V#1](https://www.babylonjs-playground.com/#LMGZ6V#1)

You will see a small blink when switching from one line to two lines of text, because the text is drawn with the false dimensions first, then with the corrected one. I don’t know if it’s possible to get rid of this blink…

---

<div class="post-metadata">

**Author:** ![Devin\_Wright](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/devin_wright/32/4302_2.png) [@Devin\_Wright](https://forum.babylonjs.com/u/Devin_Wright)\
**Post date:** [May 22, 2020, 5:14pm UTC](https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039/5 "2020-05-22T17:14:34Z")

</div>

Yea, this looks like it will work for now. I would be curious to hear if @Deltakosh has anything else to add though.

Thanks!

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 26, 2020, 4:39pm UTC](https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039/6 "2020-05-26T16:39:20Z")

</div>

I would have proposed the same solution as @Evgeni_Popov 😃

---

<div class="post-metadata">

**Author:** ![Devin\_Wright](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/devin_wright/32/4302_2.png) [@Devin\_Wright](https://forum.babylonjs.com/u/Devin_Wright)\
**Post date:** [May 26, 2020, 5:36pm UTC](https://forum.babylonjs.com/t/gui-stackpanel-resizing-cuts-off-text/11039/7 "2020-05-26T17:36:21Z")

</div>

ok cool. Thanks!
