GUI alignment for chat bubbles

I’m trying to align some chat bubbles in my application, but can’t seem to get the alignment right, no matter what I try.

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! :slight_smile: 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)

So I added a parameter to allow that to happen :slight_smile: Add forceResizeWidth on GUI Text Block to allow for width resize even… by carolhmj · Pull Request #13460 · BabylonJS/Babylon.js (github.com)

So it can look exactly like this :slight_smile:

3 Likes

That’s so sweet of you :yum: :hugs:
I already took note of this upcoming change. A very welcomed change and improvement for the tb.
Have a great day :sunglasses:

Simply amazing. Thank you very much!

Just as a quick note; will this solution be able to left-adjust the text inside the centered containers? Or does it depend on centered containers?

Nevermind. Just tested in PG. https://babylonsnapshots.z22.web.core.windows.net/refs/pull/13460/merge/index.html#XCPP9Y#17255

Works absolutely perfect! Thanks again!

1 Like