How resize Dialog box after it's visible on screen?

Question

When hidden controls appear, my dialog box doesn't resize but adds a scroll bar which i didnot wanted, please help.

I am opening a application page using dialog box in sp 2013, some controls on my dialog box are hidden and after loading if someone click on checkbox they appear.

    var options = {
        url: "_layouts/buyFruit.aspx",
        dialogReturnValueCallback: dialogReturnCallback,
        autoSize: true,
        resizable: true,
        scroll: false
    }
    SP.UI.ModalDialog.showModalDialog(options);

Answer 1

Try to use function SP.UI.ModalDialog.get_childDialog().autoSize() in modal dialog page.

More information see here

Answer 2

In SharePoint 2013:

From the modal dialog box, you should be able to call: parent.g_childDialog.autoSize();

I just tried it and it worked for me.

Answer 3

If autoSize() doesn't work as in my case, you can try internal function $O_0 for resizing modal window. Simple enough.

function resizeDialog() {
    var currentDialog = SP.UI.ModalDialog.get_childDialog();
    // currentDialog.$Q_0 - is dialog maximized
    if (currentDialog != null && !currentDialog.$Q_0) {
        //currentDialog.$10_0 = false;
        currentDialog.$O_0(356, 134);
    }
}

Replace 356 and 134 with dimensions that appropriate in your case.

SP.UI.ModalDialog.showModalDialog seems to set the size of the window late on in the client page's lifecycle. This means that if you try to set the dialog dimensions using the function above via a $(document).ready() for instance the resulting size will simply be overridden by SharePoint. If you're using JS-function to respond to user events after the initial load process it should work fine. Source

So, if nothing happen, we also need to set a short timeout after a dialog's load before execution of the function above or attach this function to some event. For example:

setTimeout(resizeDialog, 500);

Answer 4

I had similar problem, but for some reason autoSize() was not working for me, so I started digging and I wrote workaround for resizing modal window height after it is shown, using jQuery.

var dlg = SP.UI.ModalDialog.get_childDialog();
var header = $(dlg.$I_0)
var userRoot = $(dlg.$L_0);
var frameContainer = $(dlg.$1Z_0);

var headerContentHeight = header.height();
var headerMargin = header.cssUnit("margin")[0] * 2;
var headerPadding = header.cssUnit("padding")[0] * 2;
var headerHeight = headerContentHeight + headerMargin + headerPadding;
var frameContainerPadding = Math.ceil(($(dlg.$7_0).height() - userRoot.height() - headerHeight) / 2);

//frame container
$(dlg.$1Z_0).height(height - headerHeight - frameContainerPadding);

//background white space
$(dlg.$4_0).height(height);

//border
$(dlg.$1H_0).height(height);

//root of user html
userRoot.height(height - headerHeight - frameContainerPadding);

//frame
$(dlg.$7_0).height(height);

//center the window
$('.ms-dlgContent').css('top', $(window).scrollTop() + ((($(window).height() - $('.ms-dlgContent').height()) / 2) - 30) + "px");

Keep in mind that the actual height of the window is larger than the the one in the dialog options. This function will set the actual height of the dialog window to match the new height.

Maybe this solution could help anyone else, having this problem. This is all modifying the styles, so it should not be a problem, but it is kind of a "hack" so it could be buggy.