Autosized client API dialog boxes in SharePoint 2010


If you use the client side API in SharePoint 2010 for user interactions with dialog boxes, you often have to specify the size (width and height) of the dialog box. This can be a problem, especially if you redirect to a non-custom dialog box from the first dialog box. This typically leaves you with the problem of the second dialog box being “mis-sized” However, you can opt to use the showModalDialog JavaScript function and the DialogOptions class, like this:

function openDialog() {
    var options = SP.UI.$create_DialogOptions();
    options.url = "/_layouts/AutoSizedDialogBox.aspx/?IsDlg=1";
    options.autoSize = true;
    options.title = "AutoSized dialog box";
    SP.UI.ModalDialog.showModalDialog(options);
}

Notice the DialogOptions.autoSize property, which is your friend, whether you redirect from server-side or client-side code; the second dialog box, will be resized automatically. Simple, but fairly hard to come by information.

Advertisements