In the above picture, to the left, the text of the bubbles is aligned to the left, but I want the container (black part) to clamp its width to the width of the text and align to center, so it looks like the picture to the right.
I also want the text to wrap if the text is wider than say 300px (like in picture).
In GUI editor I can make it kind of work, if I set the width of the bubbles in pixels, but would prefer if this was dynamic, instead of having to calculate number of characters in text, and then base the width off of that (as that only really works with monospaced fonts).
The hierarchy is as follows:
– Container
---- Stack panel
------ Rectangle
-------- Text
Any help on how to achieve this would be greatly appreciated.
This is kindof a non answer, but when i’m working with text or some UI that i don’t need to be in 3d, i lay a DIV over canvas b/c the controls are so much better with css/html/js. To communicate between the div and babylon, i fire an event - and then listen for that event in the babylon code.
Everything in the header and modal here is html/css:
Thanks, but not really an option here, as the bubbles need to follow the characters. Sure, I could do some code that does that with html elements, but that seems a bit overkill for something that I’m pretty sure BJS can do natively.
Hey there! I tried experimenting with the GUI to see if I could get the result you showed, but then I found out that even if the text has a wrapping of WordWrap or WordWrapEllipsis, it won’t resize the width to fit the smallest needed space: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)
I tried experimenting with the GUI to see if I could get the result you showed, but then I found out that even if the text has a wrapping of WordWrap or WordWrapEllipsis, it won’t resize the width to fit the smallest needed space: 
