Unity 4.6 UI ModalPanel tutorial issues with content fitting

Questions & Answers
1

I’ve made a modal panel via the recent UI Modal Panel tutorial.
When I instantiate the modal window without some of the elements like the icon or only 1 button the elements in the layout group do not always adjust their sizes like they should.
If I try to adjust the size of the rect transform in the inspector it shows the value as editable, but if I change it then the value actually locks in and is driven by the layout group.
I’ve added Canvas.ForceUpdateCanvases() to the end of the Modal Window’s function that sets the elements active/inactive, but for the most part the modal panel still has issues.
This seems to happen mostly when other UI Canvases are showing.
Anyone have an idea?

EDIT: A bunch more details -
Code for modal panel (sorry for the lack of overrides, but this was the quickest way to set it up):

using UnityEngine;
using UnityEngine.UI;
using UnityEngine.Events;
using System.Collections;

public class ModalPanel : MonoBehaviour {
    public Text question;
    public Image iconImage;
    public Button yesButton;
    public Button noButton;
    public Button cancelButton;
    public Button iconButton;
    public GameObject modalPanelObject;

    private bool isShowing = false;
    public bool IsShowing
    { get { return isShowing; } }

    private static ModalPanel modalPanel;

    public static ModalPanel Instance()
    {
        if (!modalPanel)
        {
            modalPanel = FindObjectOfType(typeof(ModalPanel)) as ModalPanel;
            if (!modalPanel)
                Debug.LogError("There needs to be one active ModalPanel script on a GameObject in your scene.");
        }

        return modalPanel;
    }

    

    // Yes/No/Cancel with image: A string, a sprite, no event, yes event, cancel event
    public void Choice(string question, Sprite iconImage, UnityAction yesEvent, UnityAction noEvent, UnityAction cancelEvent)
    {
        this.question.text = question;
        modalPanelObject.SetActive(true);
        this.iconImage.gameObject.SetActive(false);
        yesButton.gameObject.SetActive(false);
        noButton.gameObject.SetActive(false);
        cancelButton.gameObject.SetActive(false);
        
        iconButton.onClick.RemoveAllListeners();

        if (yesEvent != null)
        {
            yesButton.onClick.RemoveAllListeners();
            yesButton.onClick.AddListener(yesEvent);
            yesButton.onClick.AddListener(ClosePanel);
            yesButton.gameObject.SetActive(true);
        }

        if (noEvent != null)
        {
            noButton.onClick.RemoveAllListeners();
            noButton.onClick.AddListener(noEvent);
            noButton.onClick.AddListener(ClosePanel);
            noButton.gameObject.SetActive(true);
        }

        if (cancelEvent != null)
        {
            cancelButton.onClick.RemoveAllListeners();
            cancelButton.onClick.AddListener(cancelEvent);
            cancelButton.onClick.AddListener(ClosePanel);
            cancelButton.gameObject.SetActive(true);
            
            foreach (Transform t in cancelButton.transform)
            {
                if (t.name == "Text")
                {
                    if (noButton == null && yesButton == null)
                    {
                        t.GetComponent<Text>().text = "OK";
                    }
                    else 
                    {
                        t.GetComponent<Text>().text = "Cancel";
                    }
                    break;
                }
            }
        }
        
        if (iconImage != null)
        {
            this.iconImage.sprite = iconImage;
            this.iconImage.gameObject.SetActive(true);
        }
        isShowing = true;
        Canvas.ForceUpdateCanvases();        
    }


    public void AssignIconButtonAction(UnityAction iconAction)
    {
        iconButton.onClick.RemoveAllListeners();
        iconButton.onClick.AddListener(iconAction);
        iconButton.onClick.AddListener(ClosePanel);
        iconButton.gameObject.SetActive(true);
    }

    public void ClosePanel()
    {
        isShowing = false;
        if (!isShowing)
            Debug.Log("ModalPanel closed");

        modalPanelObject.SetActive(false);
    }
}

Images:
Initial way the dialogue appears - notice text is overrunning, moved to the right, cancel button is not stretched to fill parent.
alt text

Inspector view of the text object, notice the rect’s values are not locked yet.
alt text

Inspector view after manually attempting to change the rect’s values. Notice they are now locked as they should be. And “driven by layout group”
alt text

Here’s what the text should look like. The same issue happens with the button which should automatically fill the width.
alt text

And finally, here’s an image of the parent container’s setup. This should be driving the size of the text child object (which it does, but only after manually changing rect values).
alt text

3

OK I think I’ve figured it out.
Since the main container for the UI is disabled when the scene loads for some reason the children rects don’t get locked in as driven by canvas. Really annoying.
So what I did is instead of having the main container disabled I leave it enabled and add a Canvas Group component to it. With the canvas group component I set alpha to 0, interactable and blocks raycasts to false. When I want to show the window I turn alpha to 1, interactable and blocks raycasts to true. This when the scene is loaded the rects are locked to driven by the canvas and everything seems to work fine.

Not as ideal or clean as toggling the active setting for the main container, but it works!

Thanks for trying to help. Hopefully someone else will find this helpful as I can’t imagine I’m the only one who watched that tutorial and is later having issues with the setup.

Cheers!

2

OK Try putting a Content Size Fitter on that Text element and set the Vertical Size to Preferred Size.

Really though do you need a Layout group for such a simple panel or is the a panel you want to use for all sorts of things but just hit an issue with this setup.

You could just setup with the background image and a Text and button with the anchors in the corners of each UI element, so size the text box as you want it to look and drag the anchors to the corner of the Text box. Set it’s text to Best fit.

Do the same, with the Anchors for the button and the button Text. That should re-size the elements when the size of the parent panel changes.