GUI StackPanel resizing cuts off text

Playground

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.

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

or maybe @Evgeni_Popov would have a clue :slight_smile: ?

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

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…

1 Like

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

Thanks!

I would have proposed the same solution as @Evgeni_Popov :smiley:

ok cool. Thanks!