How to auto adjust text+image widget to fit variable text content?

Ssteidle · June 25, 2021, 8:27pm

Hi, I am not a pro at UE4 - I’ve read lots of different similar Q+A’s and experimented endlessly without success.

My goal:

Have a text widget pop up upon clicking, and ensure that the text widget automatically enlarges to fit all the text that is input to the component.
I also have an image in the widget that serves as a backdrop, and I want this to also enlarge so it always frames the text.

Photos are attached. After no luck with Scale Box nor Size Box, I tried placing both Image and Text into a Grid Panel and ticking “size to content” for the grid panel, but you’ll notice that it doesn’t grow enough in size when I type in a lot of text.

#headache. THANK YOU FOR YOUR HELP

Ssteidle · June 25, 2021, 9:20pm

I want it to expand vertically. In the example photo you’ll see I (think in the past) set a maximum bound for horizontal length

Ssteidle · June 25, 2021, 9:43pm

!! The “Draw at Desired Size” = CRUCIAL.

Thank you!

Everynone · June 25, 2021, 9:16pm

This can be done but one thing is unclear.

ensure that the text widget
automatically enlarges to fit all the
text that is input to the component.

How are you going to handle horizontal size? What are the rules? When are wrapping to the next line? Is this value fixed or dynamic?

As in:

What would be the desired size? Are we expanding only in vertically or also horizontally?

Everynone · June 25, 2021, 9:33pm

ensure the outer element that should respect the size of the text is sitting in the canvas and is flagged as Size To Content
ctrl+shift click middle anchor from the dropdown for that element - this will anchor it in the middle of the canvas

select the desired wrap size for the text - that’s your max horizontal size
ensure auto wrap is off
try to ignore the way it looks in preview - there’s been no layout pre-pass so it may look funky at this stage

flag the widget component to respect the Desired Size the text box dictates:

Everynone · June 25, 2021, 9:42pm

So text wrapped to 256px should look like so:

Everynone · June 25, 2021, 9:47pm

Now, Draw at Desired Size is somewhat computationally intensive. If you update text once, it’s absolutely fine. If you print it letter by letter, it’s also fine since you’ll be doing it to 1 widget at a time, most likely.

If you want to update it every frame (perhaps you’re doing something funky and animated with the text) to many widgets, it will get costly.

Everynone · June 25, 2021, 10:10pm

Nah, that’s more that fine.

Ssteidle · June 25, 2021, 9:56pm

Ok, hmm, good to know. What I imagine is that I will have roughly 10-15 of these in my game. Each will have it’s own static message (this is an informational tour), so the user is not interacting with the widget or changing its input. Is that computationally burdensome?