Heya, I’ve run into a bug where a GUI control’s text becomes uncentered after changing its container’s font size.
When the container’s font size is changed after child controls have been created, then their text’s position is corrupted. The control seems to be still using the original font size for positioning, instead of recalculating the text’s position based on the new font size.
The easiest way to reproduce the issue is to use the GUI editor to add a text button (or any other input control with text), then change the root container’s font from 18px to 9px, e.g., and the text will no longer be centered.
Changing the button’s font size causes the same misalignment. Changing the text block’s font size directly fixes the issue, but being able to resize the font for all of the controls at once would be much more convenient of course, using the root container’s font size.
The same issue occurs when using javascript to change the root container’s font size on window resize, so I can confirm that it’s not just a GUI editor issue…
P.S., saving to snippet server fixes the horizontal centering issue, but not the vertical centering issue, so it’s best to re-create the issue from a new GUI, to see how it looks before it’s saved I think, but here’s a screen shot for example (zoomed in a bit to see the misalignment easier).
Only the horizontal alignment is corrected on save thou, so when setting the root container’s font size on window resize for example, the vertical misalignment issue is still present even after saving…
Edit, here’s a playground to repo the issue. The GUI for it was made by just adding the button and saving, without changing the font size or anything else from the GUI editor. Then after setting the root container’s font size in javascript the vertical alignment is off. https://playground.babylonjs.com/#4RTUCB#25
Interestingly, I also tried making the button directly from javascript and in that case the button maintains its proper centering after changing the root container’s font size. https://playground.babylonjs.com/#XCPP9Y#9464
Edit2, the same issue happens with the InputText control too, so it’s not just the button creation that’s the issue, that’s all I can confirm from my testing thou…
Is it happening mostly with text? Or what about images inside buttons.
I’m curious if this is a editor issue, serialization or both? Thank you for your repros. I have hunches to where some of the issues could be happening. You code reproduction using pure Javascript could be a big key!
(I can also take a look at this tomrrow if you’re busy)
The