none
New Item Dialog is not wide enough, SP2016

    Question

  • 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 div.ms-dlgContent shows up.  I have tried

    windows.onload
    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="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" 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: //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 = 800; arguments[0].height = 1000; } } return base_OpenPopUpPageWithDialogOptions.apply(this, arguments); } }, "core.js" ); }); </script> <style> /* Dialog form */ html.ms-dialog #onetIDListForm { width: 100%; } Dialog form fields html.ms-dialog #onetIDListForm .ms-formbody { width: 100%; } </style>



    sal




    mercredi 16 mai 2018 05:56
  • Hi nova_sp_dev, 

    <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></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:

    https://www.c-sharpcorner.com/article/create-modal-dialog-pop-up-in-sharepoint-2016-and-office-365/

    Dynamically Resize SharePoint Modal Dialogs:

    http://itgroove.net/bangimportant/2016/04/22/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 tnsf@microsoft.com.


    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
    Modérateur