How to dynamically autoSize a sharepoint modal dialog box?

4
votes

I've created a web application in sharepoint which has a sign in link which loads a login webpart in the modal window on click. I haven't set the height of the modal pop through options but i have set its width only.

IE 7, 8 and 9 loads the webpart as per my need, and it automatically adjusts its height on load. But Firefox (din't test in Chrome) loads the webpart but the height is not adjusted automatically to fit the login WP.

I tried using SP.UI.ModalDialog.get_childDialog().autoSize() explicitly like below

ExecuteOrDelayUntilScriptLoaded(function () {
SP.UI.ModalDialog.get_childDialog().autoSize();
}, "sp.ui.dialog.js");

But this also does not work for Firefox. Calling autoSize in IE works great when I display the errors on login screen but on FF it returns height to be less than 20px and the modal popup seems to have a width but its height is less than 20.

How do I solve this issue?

Please help.

Sorry if I looked like a noob to all.

Thanks in advance

3
sharepoint
Does your web part have a height definition? – banana
no.. it doesnt.. i have only width set. height is made to automatically choose it based on the content tat loads inside the modal popup – Abhilash L R

3 Answers

3
votes

I was just trying to work through a simliar problem myself. I wanted to override the width because my content was wrapping in an undesired behavior. I found that the following allows me to adjust the width after the dialog is presented.

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

I just added that into a script editor webpart as part of the display form part and it works like a dream.

1
votes

I think you need to set the property autoSize before creating the dialog:

var options = SP.UI.$create_DialogOptions();
options.autoSize = true;
...
SP.UI.ModalDialog.showModalDialog(options);

Hope this helps.

0
votes

I had similar problem, but for some reason autoSize() was not working for me, so I started digging and I wrote workaround for resizing modal window height after it is shown, using jQuery.

var dlg = SP.UI.ModalDialog.get_childDialog();
var header = $(dlg.$I_0)
var userRoot = $(dlg.$L_0);
var frameContainer = $(dlg.$1Z_0);

var headerContentHeight = header.height();
var headerMargin = header.cssUnit("margin")[0] * 2;
var headerPadding = header.cssUnit("padding")[0] * 2;
var headerHeight = headerContentHeight + headerMargin + headerPadding;
var frameContainerPadding = Math.ceil(($(dlg.$7_0).height() - userRoot.height() - headerHeight) / 2);

//frame container
$(dlg.$1Z_0).height(height - headerHeight - frameContainerPadding);

//background white space
$(dlg.$4_0).height(height);

//border
$(dlg.$1H_0).height(height);

//root of user html
userRoot.height(height - headerHeight - frameContainerPadding);

//frame
$(dlg.$7_0).height(height);

//center the window
$('.ms-dlgContent').css('top', $(window).scrollTop() + ((($(window).height() - $('.ms-dlgContent').height()) / 2) - 30) + "px");

Keep in mind that the actual height of the window is larger than the the one in the dialog options. This function will set the actual height of the dialog window to match the new height.

Maybe this solution could help anyone else, having this problem. This is all modifying the styles, so it should not be a problem, but it is kind of a "hack" so it could be buggy.