koobas.hobune.stream
Dynamic textbox with UI
I would like to create a dynamic textbox that is wrapping the text around and adapting to the width and height of the given text. Something like a chat bubble UI. How would you approach this with the Unity UI system?
Create an Image (UI/ Image). This will be your background (act as the bubble).
Add a Text (UI/Text) as a child to the image you just created.
On the image add the following components:
Vertical Layout Group
Content Size Fitter
On the Vertical Layout Group component make sure Control Child Size And Child Force Expand are all selected (for both width and height)
On the Content Size Fitter choose Preferred Size for both Horizontal Fit and Vertical Fit
The background should now resize to adapt to the text.
Thank you! Just figured it out myself as well (comment below) :) $$anonymous$$arked yours as accepted!
Congrats. I am glad you also figured it out by yourself :)
If you imagine a whatsapp type bubble, they often have a max width/horizontal limit. I cant seem to make that work. Do you have any tips?
$$anonymous$$aybe trying another object with another vertical layout group without the control child size?
Well, how should the image parent canvas be configured? i tried this solution but as soon as i choose preferred size on the content size fitter the image turns giant
Okay, figured it out myself.
You will need a parent GameObject (for example an Image) with a Content Size Fitter and a Horizontal Layout Group component. Inside the parent you will add the GameObject with the Text component. On the parent set the Content Size Fitter "Horizontal" and "Vertical fit" to "Preferred Size". On the Horizontal Layout Group set the "Control Child Size" for "Width" and "Height" to true. With the Layout Group you can also add padding to your dynamic text.
