As the title suggests, I need some sort of adapt child text block size both horizontally and vertically based on the text width for a single line text only
So let’s say if a simple message is small enough to fit the parent container and remain as 1 line text then I want text block to shrink BUT if the text box is bigger than 2 lines of text then it can take a full width because I just don’t care about the container width for this case
I’ve tried to manually calculate width and hook to various callbacks such as TextBlock.onBeforeRenderObservable and TextBlock.onLinesReadyObservable but I was getting various exceptions or the UI would render multiple times causing weird glitches and artifacts so it’s pretty safe to say I don’t have any working code at the moment and before I keep hacking it together I decided to post a question here hah
I’ve also used the text sizing code from this article but I couldn’t get reliable values so the text block would break until I add some hacky offsets here and there so I discarded this idea as it’s not flexible enough
This is what I get BAD (textWrapping ON , parent has adaptWidthToChildren = true)
So, did you actually try this using a vertical ScrollViewer (with no bar) inside an (oversized and transparent) stackPanel? I believe it would do just that (without tons of lines of code).
Edit: I was just checking your question again and I think I better understand your issue. While I was making this PG just quickly (stupidly thinking I would solve the issue in 2 min I think I detected what you are talking about. It seems like (no matter the parent/container) when you are using wordWrap, the resizeToFit and any calls to adapt the parent container (such as adaptWidthToChildren), does not work anymore… @DarraghBurke , I’d also be interested in understanding what is happening here and how to fix it, so let me just bookmark this and wait for your invaluable input on that … thx,
Thanks a lot for a reply!
I tried both scroll viewer and stack panel but either I did something wrong or they didn’t work well, I think I’ve seen this solution in a different thread.
Speaking of your edit - yup that’s exactly the issue I’ve got, I have a good amount of tiny messages and then I have some server announcements, tiny messages look very out of place when they take most of the upper screen when it’s just a few words, however, server announcements are fine because they’re expected to be pretty long anyway
Thanks for that playground link! I should’ve made that too myself, but I keep forgetting babylon has one until someone points at it haha
First of all, so sorryfor the delay in responding! I try to answer every ping, but I do miss these threads sometimes.
As for your question, it’s definitely not possible to have word wrap and resizeToFit both on at the same time, because word wrap requires a maximum width in order to know when to break the words. However, you might want to take advantage of the TextMetrics - Web APIs | MDN (mozilla.org) here. You can call advancedTexture.getContext().measureText() on your text string, and then determine if it is longer than some fixed width. If so, set the width of the control to that width and turn on word wrap. If not, just set resizeToFit to true.
The one important thing here will be to make sure you set the right font face and font size on the context first so that your measurement is accurate.
I started doing something similar but this is a low priority issue so I paused it, for now, I’ll definitely try messing with the width as you suggest and it makes sense in general so I think it should work just fine
I think I detected what you are talking about. It seems like (no matter the parent/container) when you are using wordWrap, the resizeToFit and any calls to adapt the parent container (such as adaptWidthToChildren), does not work anymore… 
… thx,