How to dynamically auto-record modal sharepoint dialog box?

Question

I created a web application in sharepoint that has a link to a link that loads the web page of entering the modal window when clicked. I did not set the height of the pop modal options, but I set only its width.

IE 7, 8, and 9 load the web page according to my need and automatically adjust its height when loading. But Firefox (test without verification in Chrome) loads the web page, but the height is not automatically adjusted to match the WP login.

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

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

But this also does not work for Firefox. The autoSize call in IE works fine when I display errors on the login screen, but on FF it returns a height of less than 20 pixels and the modal popup has a width but its height is less than 20.

How to solve this problem?

Please, help.

Sorry if I look like noob for everyone.

Thank you in advance

Answer 1

It seems to me that you need to set the autoSize property to by creating a dialog:

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

Hope this helps.

Answer 2

I was just trying to solve the simliar problem myself. I would like to redefine the width because my content wrapped up in unwanted behavior. I found that the following allows me to adjust the width after the dialog box displays.

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

I just added that to the script editor web part as part of the display form part, and it works like a dream.

Answer 3

I had a similar problem, but for some reason autoSize () did not work for me, so I started digging and I wrote a workaround for resizing the modal window after showing it 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 greater than the one in the dialog box. This function will set the actual height of the dialog box according to the new height.

Perhaps this solution can help anyone else having this problem. This all modifies the styles, so this should not be a problem, but it is a kind of “hack”, so it can be a mistake.