New Item Dialog is not wide enough, SP2016


  • In SP2016 OnPrem I have a custom InfoPath form set for the new list item form.

    The form works fine but the Dialog Modal window is too narrow and I cannot get it to the correct width to show the whole form.

    I have tried to add a content editor web part to the new item form and set the width for the ms-dlgContent class but it has no effect. I noticed that the div with class ms-dlgConten has an inline style for the width property of 642px.

    I tried the following JavaScript and  it seems like it wants to work when the form first pops up but then it is overridden by the inline style.

    ExecuteOrDelayUntilScriptLoaded(function () {  var dialog = SP.UI.ModalDialog.get_childDialog();  dialog.$2_0.autoSizeStartWidth = 1100;  dialog.autoSize();}, "sp.ui.dialog.js");

    I do not have access to the page master or any of the server stuff.

    I was thinking I could use JavaScript to dynamically change the inline style to the width I desire but I cannot figure out when the shows up.  I have tried

    Where should I be looking or what can I try?

    NOVA Dev

    mardi 15 mai 2018 20:43

Toutes les réponses

  • Hi,

    Use the Below script in Content Editor Webpart

    <script src="" type="text/javascript"></script>

    <script type="text/javascript"> $(function () { ExecuteOrDelayUntilScriptLoaded( function() { var base_OpenPopUpPageWithDialogOptions = OpenPopUpPageWithDialogOptions; OpenPopUpPageWithDialogOptions = function () { //arguments[0] is the options argument for SP.UI.ModalDialog.showModalDialog: // 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 = 800; arguments[0].height = 1000; } } return base_OpenPopUpPageWithDialogOptions.apply(this, arguments); } }, "core.js" ); }); </script> <style> /* Dialog form */ #onetIDListForm { width: 100%; } Dialog form fields #onetIDListForm .ms-formbody { width: 100%; } </style>


    mercredi 16 mai 2018 05:56
  • Hi nova_sp_dev, 

    <script language="javascript" type="text/javascript" src="//"></script>  
    <script language="javascript" type="text/javascript">  
        $(document).ready(function() {  
            SP.SOD.executeFunc('sp.js', 'SP.ClientContext', showModalPopUp);  
        function showModalPopUp() {  
            //Set options for Modal PopUp  
            var options = {  
                url: '/sites/HOL/Pages/Custom-Publishing-Page.aspx?IsDlg=1', //Set the url of the page  
                title: 'SharePoint Modal Pop Up', //Set the title for the pop up  
                allowMaximize: false,  
                showClose: true,  
                width: 600,  
                height: 400  
            //Invoke the modal dialog by passing in the options array variable  
            SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);  
            return false;  

    Refer to the following article about create Modal Dialog Pop Up in SharePoint 2016 And Office 365:

    Dynamically Resize SharePoint Modal Dialogs:

    Best Regards, 

    Lisa Chen 

    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact

    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    mercredi 16 mai 2018 08:15