locked
How do I resize a dialog box once it's open? RRS feed

  • Question

  • Is there a built-in method that will resize a SP dialog window after it's open?  I've got content that is changing and I don't want the scrollbars to show.
    Monday, November 22, 2010 12:13 AM

Answers

  • It could be that the APIs are lacking, it could be that the documentation of the APIs is lacking, either way it's a half-baked effort from MS and I've only found one way to fix this issue.

    If you're using jQuery in your solution you can use this javascript function (from within your modal dialog):

      var resizeCommonModalDialog = function (width, height) {
    
       // get jQuery objects for relevant parts of the dialog
       var dialogElements = new Array();
       var getDialogElement = function (elementArray, elementRef) {
        elementArray[elementRef] = $('.ms-dlg' + elementRef, window.parent.document);
       };
       getDialogElement(dialogElements, "Border");
       getDialogElement(dialogElements, "Title");
       getDialogElement(dialogElements, "TitleText");
       getDialogElement(dialogElements, "Content");
       getDialogElement(dialogElements, "Frame");
    
       // calculate width & height delta
       deltaWidth = width - dialogElements["Border"].width();
       deltaHeight = height - dialogElements["Border"].height();
    
       for (var key in dialogElements) {
        // set the width
        dialogElements[key].width(dialogElements[key].width() + deltaWidth);
    
        // set the height, excluding title elements
        if (key != "Title" && key != "TitleText") {
         dialogElements[key].height(dialogElements[key].height() + deltaHeight);
        }
       }
      }
    

    Note: 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 resizeCommonModalDialog to respond to user events after the initial load process it should work fine.

    Also note: this function only changes the dimensions of the dialog, not the position. I'll leave that as an exercise for the reader :-)

    Hope this is what you're looking for!

    Sam

    • Proposed as answer by samdv1982 Tuesday, November 30, 2010 1:42 AM
    • Marked as answer by Wayne Fan Tuesday, December 7, 2010 2:10 AM
    Tuesday, November 30, 2010 1:40 AM

All replies

  • Yes there is.Check out the properties for your dialog.


    If someone on the forums takes the time to successfully address your question, please return the favor by marking their reply as helpful or as the answer to your question.
    Monday, November 22, 2010 5:05 AM
  • Yes there is.Check out the properties for your dialog.


    If someone on the forums takes the time to successfully address your question, please return the favor by marking their reply as helpful or as the answer to your question.
    Got an example of how to access those properties?
    Monday, November 22, 2010 4:01 PM
  • Hi fubak,

     

    Thanks for your post.

    Why not resize the dialog window before it’s opened? You can do like this:

    function portal_openModalDialog() {

        var options = SP.UI.$create_DialogOptions();

        options.width = 500;

        options.height = 250;

        options.url = "/_layouts/StandardsPortal/ChangePassword.aspx";

        options.dialogReturnValueCallback = Function.createDelegate(

                            null, portal_modalDialogClosedCallback);

        SP.UI.ModalDialog.showModalDialog(options);

    }

     

    Of course, if you want to resize it after it’s open, you can do as following:

    http://codecorner.galanter.net/2009/12/03/resizing-ie-modal-dialog-in-javascript/

     

    Share your views.

     


    SharePoint 2010
    Tuesday, November 23, 2010 9:03 AM

  • Hi fubak,

     

    Thanks for your post.

    Why not resize the dialog window before it’s opened? You can do like this:

    function portal_openModalDialog() {

        var options = SP.UI.$create_DialogOptions();

        options.width = 500;

        options.height = 250;

        options.url = "/_layouts/StandardsPortal/ChangePassword.aspx";

        options.dialogReturnValueCallback = Function.createDelegate(

                            null, portal_modalDialogClosedCallback);

        SP.UI.ModalDialog.showModalDialog(options);

    }

     

    Of course, if you want to resize it after it’s open, you can do as following:

    http://codecorner.galanter.net/2009/12/03/resizing-ie-modal-dialog-in-javascript/

     

    Share your views.

     


    SharePoint 2010
    I tried the window.dialogWidth and Height and it doesn't work.  Those properties are undefined on the window object.
    • Proposed as answer by Nikolay Volf Monday, October 15, 2012 8:32 AM
    • Unproposed as answer by Nikolay Volf Monday, October 15, 2012 8:32 AM
    Monday, November 29, 2010 12:52 PM
  • It could be that the APIs are lacking, it could be that the documentation of the APIs is lacking, either way it's a half-baked effort from MS and I've only found one way to fix this issue.

    If you're using jQuery in your solution you can use this javascript function (from within your modal dialog):

      var resizeCommonModalDialog = function (width, height) {
    
       // get jQuery objects for relevant parts of the dialog
       var dialogElements = new Array();
       var getDialogElement = function (elementArray, elementRef) {
        elementArray[elementRef] = $('.ms-dlg' + elementRef, window.parent.document);
       };
       getDialogElement(dialogElements, "Border");
       getDialogElement(dialogElements, "Title");
       getDialogElement(dialogElements, "TitleText");
       getDialogElement(dialogElements, "Content");
       getDialogElement(dialogElements, "Frame");
    
       // calculate width & height delta
       deltaWidth = width - dialogElements["Border"].width();
       deltaHeight = height - dialogElements["Border"].height();
    
       for (var key in dialogElements) {
        // set the width
        dialogElements[key].width(dialogElements[key].width() + deltaWidth);
    
        // set the height, excluding title elements
        if (key != "Title" && key != "TitleText") {
         dialogElements[key].height(dialogElements[key].height() + deltaHeight);
        }
       }
      }
    

    Note: 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 resizeCommonModalDialog to respond to user events after the initial load process it should work fine.

    Also note: this function only changes the dimensions of the dialog, not the position. I'll leave that as an exercise for the reader :-)

    Hope this is what you're looking for!

    Sam

    • Proposed as answer by samdv1982 Tuesday, November 30, 2010 1:42 AM
    • Marked as answer by Wayne Fan Tuesday, December 7, 2010 2:10 AM
    Tuesday, November 30, 2010 1:40 AM
  • I use the following javascript to resize the modal dialog after the ribbon appears:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    // call this function to resize the modal dialog to fit on the page
    function resizeDialog()
    {
    	//calling autoSize method will extend modal dialog beyond the size of the page
    	SP.UI.ModalDialog.get_childDialog().autoSize();
    	//calling this obfuscated method will trim the dialog back within the page boundaries.
    	SP.UI.ModalDialog.get_childDialog().$2B_0();
    }
    
    // hookup a function to the ribbon div resize event
    $(document).ready(function() {
    	$('#s4-ribbonrow').resize(function() {
    		// only act if the ribbon is resized to its full size (typically 135 px)
    		if ($('#s4-ribbonrow').height() > 100) {
    			// give the page a second to settle before resizing
    			setTimeout(resizeDialog, 1000);
    			// unhook our resize event
    			$('#s4-ribbonrow').unbind('resize');
    		}
    	});
    });
    </script>
    
    It's a bit of a hack and it's using undocumented SharePoint ECMAScript API methods, but for now it works.

     

    • Proposed as answer by Natallia Friday, September 30, 2011 8:17 AM
    Friday, February 4, 2011 5:06 PM
  • This is an update to my previous post. The javascript stopped working in IE7 after applying an SP2010 hotfix for Dec 2010. It's still a hack, but take from it what you will.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    // call this function to resize the modal dialog to fit on the page
    function resizeDialog()
    {
    	// only execute resize if the InfoPath ribbonbar is present
    	if ($('ul[id*=InfoPath]').length > 0) {
    		// get dialog
    		var dialog = SP.UI.ModalDialog.get_childDialog();
    		var ribbonbarHeight = $('#s4-ribbonrow').height();
    		
    		// get dialog dimensions
    		var dialogWidth = dialog.$B_0; 
    		var dialogHeight = dialog.$A_0 + ribbonbarHeight; // add ribbonbar height to total dialog height
    		
    		// get max dialog dimansions
    		var maxDimensions = dialog.$1a_0();
    		var maxDialogWidth = maxDimensions[0];
    		var maxDialogHeight = maxDimensions[1];
    		
    		// ensure new height < max height
    		if (dialogHeight > maxDialogHeight) {
    			dialogHeight = maxDialogHeight;
    		}
    		
    		// persist new height so it will be remembered after a dialog resize
    		dialog.$A_0 = dialogHeight; 
    
    		// persist dialog offsets
    		dialog.$T_0 = dialog.$2_0.offsetLeft;
    		// adjust top offset to accomodate for ribbonbar
    		dialog.$U_0 = dialog.$2_0.offsetTop - (ribbonbarHeight/2);
    		
    		// ensure new offset < max offset
    		if (dialog.$U_0 < 10) {
    			dialog.$U_0 = 10;
    		}
    
    		// set dialog box offsets to position it in the center of the screen
    		dialog.$m_0(dialog.$T_0, dialog.$U_0);
    
    		// add 1 to width to fix IE7 scrollbar rendering bug
    		if (Sys.Browser.agent === Sys.Browser.InternetExplorer && Sys.Browser.version === 7) {
    			dialogWidth = dialogWidth + 1;
    		}
    		// resize dialog
    		dialog.$Q_0(dialogWidth, dialogHeight);
     }
    }
    
    
    // hookup a function to the ribbon div resize event
    $(document).ready(function() {		
    	$('#s4-ribbonrow').resize(function() {
    		// only act if the ribbon is resized to its full size (typically 135 px)
    		if ($('#s4-ribbonrow').height() > 100) {
    			// give the page a second to settle before resizing
    			setTimeout(resizeDialog, 1000);
    			// unhook our resize event
    			$('#s4-ribbonrow').unbind('resize');
    		}
    	});
    });
    </script>
    

    • Edited by havana59er Friday, March 4, 2011 7:08 PM minor language correction
    Friday, March 4, 2011 7:06 PM
  • I've just published a blog post with regards to SP2010 Modal Dialog tips & tricks.

    http://blog.collabware.com/2012/10/30/tips-tricks-sharepoint-2010-modal-dialogs/

    Our solution uses all the same code and logic for sizing the dialog on page load that's found in SP.UI.Dialog.js. No dependency on jQuery or other external frameworks.

    Hope this helps everyone!

    Tuesday, October 30, 2012 6:02 PM
  • Thanks, it worked for me

    Set window position:

     var resizeCommonModalDialog = function (width, height) {

       // get jQuery objects for relevant parts of the dialog
       var dialogElements = new Array();
       var getDialogElement = function (elementArray, elementRef) {
        elementArray[elementRef] = $('.ms-dlg' + elementRef, window.parent.document);
       };
       getDialogElement(dialogElements, "Border");
       getDialogElement(dialogElements, "Title");
       getDialogElement(dialogElements, "TitleText");
       getDialogElement(dialogElements, "Content");
       getDialogElement(dialogElements, "Frame");

       // calculate width & height delta
       deltaWidth = width - dialogElements["Border"].width();
       deltaHeight = height - dialogElements["Border"].height();

       for (var key in dialogElements) {
        // set the width
        dialogElements[key].width(dialogElements[key].width() + deltaWidth);

        // set the height, excluding title elements
        if (key != "Title" && key != "TitleText") {
         dialogElements[key].height(dialogElements[key].height() + deltaHeight);
        }
       }
       
       //set position
       var dlgWin = $(".ms-dlgContent", window.parent.document);
            dlgWin.css({ top: ($(window.top).height() / 2 - dlgWin.height() / 2) + "px", left: $(window.top).width() / 2 - dlgWin.width() / 2 });
       
      }

    Tuesday, November 10, 2015 12:28 PM
  • Position can be set using the below code

    var dlg = typeof(SP.UI.ModalDialog.get_childDialog) == "function" ? SP.UI.ModalDialog.get_childDialog() : null;
        if (dlg != null) {
            dlg.autoSize();
            var dlgWin = $(".ms-dlgContent", window.parent.document);
            dlgWin.css({ top: ($(window.top).height() / 2 - dlgWin.height() / 2) + "px", left: $(window.top).width() / 2 - dlgWin.width() / 2 });
        }

    Ref : http://chadschroeder.blogspot.com/2012/10/sharepoint-2010-easy-dynamic-resize-of.html


    Rakesh

    Friday, October 7, 2016 8:54 AM