Increase width for form modal dialog

Question

How do I increase width of forms modal dialog?

API provides a way to specify ModalDialog options: SP.UI.ModalDialog.showModalDialog(options) Method, however how do I increase width in case when I use OOTB modal dialogs i.e List Form that has Launch forms in a dialog setting set to Yes?

Searching over a net usually leads to unsupported methods or in case where dialog is called from custom code.

Answer 1

When Launch forms in a Dialog option is set, it eventually calls OpenPopUpPageWithDialogOptions method.

We can override this method and specify parameter values that will be used to construct the dialog. In this example, width is increased to maximum of 1200 pixels.

This script must be present on a page where WebPart or List items are listed.

/*
    Overrides SP function OpenPopUpPageWithDialogOptions to allow extended width dialogs.
    This function is used when Launch forms in a dialog setting is set to Yes.
    Custom css rules are also required on form to adjust width.
*/
ExecuteOrDelayUntilScriptLoaded(
    function() {
        var base_OpenPopUpPageWithDialogOptions = OpenPopUpPageWithDialogOptions;
        OpenPopUpPageWithDialogOptions = function () {
            //arguments[0] is the options argument for SP.UI.ModalDialog.showModalDialog:
            //https://msdn.microsoft.com/en-us/library/office/ff410058(v=office.14).aspx
            if (arguments[0]) {
                if (!arguments[0].width) {
                    //If window size is less than 1200px, dialog size will still fit into the window.
                    arguments[0].width = 1200;
                }
            }

            return base_OpenPopUpPageWithDialogOptions.apply(this, arguments);
        }
    },
    "core.js"
);

However it is also necessary to insert these CSS rules on your form (not where javascript override code is located, but the actual display form for the item which opens in a dialog):

/* Dialog form */
html.ms-dialog #onetIDListForm {
    width: 100%; }
    /* Dialog form fields */
    html.ms-dialog #onetIDListForm .ms-formbody { 
        width: 100%; }

Do it either by Masterpage, RenderingTemplate, SP Designer or any other way.

EDIT @ 2017

Time has passed, SharePoint has a better way to do it since 2013. See Sharepoint 2013 JSOM/Javascript API documentation?