Making a dialog that expands to fit its text

Question

I'm trying to make an OK/Cancel-style dialog which will expand to fit its text in Unity 5.6. I've been trying to pull this off using Unity's built-in UI layout components, but so far I haven't been able to get it exactly right.

The dialog has a background, a title, a body, and two buttons. The goal is for the dialog to resize itself vertically to fit the length of the text. Here is an example with placeholder graphics:

I have this almost working properly, but I created it by abusing the built-in layout components and it doesn't always behave properly. Here's how it's currently set up:

• Background is an Image
  • Vertical Layout Group:
    • Control Child Size: Width
  • Content Size Fitter:
    • Horizontal Fit: Unconstrained
    • Vertical Fit: Min Size

Background has the following children:

• Title is a Text
• Body is a Text
  • Content Size Fitter
    • Horizontal Fit: Unconstrained
    • Vertical Fit: Preferred Size
• Buttons is a GameObject
  • Horizontal Layout Group
    • Child Force Expand: Width and Height

This setup works about 90% of the time, with the dialog properly resizing according to the text. However, at certain (seemingly arbitrary) body lengths, an extra blank line will be added to the Body text, which disrupts the vertical spacing and gives the dialog a strange look:

This isn't too surprising, because you're not supposed to put a Content Size Fitter on a child of a Layout Group; however, I couldn't figure out any other way to get the dialog to vertically expand to fit more text. Is there a better way to handle this?

Answer 1

You can use the text object's preferredWidth and prefferedHeight values to do this.

I've done something similar in a project here:

https://github.com/Draco18s/IdleArtificer/blob/master/Assets/draco18s/artificer/game/GuiManager.cs#L66

My code includes a value for creating a ratio in the end result's width and height, but if you are only expanding the height, all you need to do is call SetSizeWithCurrentAnchors vertically and it should expand to the necessary height.

Some of the operations I perform, however, are due to scene setup and the background image I use. Be aware of such things when it looks arbitrary.

Answer 2

Perhaps you could set the "body" component to have the text verically aligned to the center. Therefore, even if there's a blank line, the text appears on the center anyway.

Answer 3

Step 1: There is a component called Layout element, set the needed adjustment in that and add one more component ContentSizeFitter and set the horizontal and vertical as preferred size. This will modify the width and height of the text rectttransform .

Step 2: Add a script in the image (message box) which will modify the size

    TextMeshProUGUI textVal;

    RectTransform rectTransform;

    void Start()
    {
        rectTransform = GetComponent<RectTransform>();
        textVal = GetComponentInChildren<TextMeshProUGUI>();
        StartCoroutine(ModifySize());
    }

    IEnumerator ModifySize()
    {
        //skipping one frame so that UI size modifications will happen properly
        yield return new WaitForEndOfFrame();

        //setting the textbox size and adding some offset so that it looks little spacious
        Vector2 sizeDelta = textVal.rectTransform.sizeDelta + new Vector2(Screen.width * 0.2f, Screen.height * 0.1f);
        rectTransform.sizeDelta = sizeDelta;
    }