SharePoint Popup Scroll gone after autoSize

I’m writing this post after not finding anything about this problem in Google.

The issue

When you have a SharePoint 2010 popup dialog, that uses autoSize (like the new item / edit item forms in any SharePoint list), if you call “window.frameElement.autoSize()” second time, there is no scroll in the popup.

Say you have a field control or a web part that changes in height when the user interacts with it. In my case, I was working on a “repeating rows” field type, where the user can add as many rows to the field as he wants – much like in InfoPath.

When the user add new rows, the height of my popup changes, so I have to resize it.

Documentation is pretty clear, call window.frameElement.autoSize() and it should resize your dialog.

Apparently, this works well for the first time you call it, but for some reason if I call it second/third/ninth time – once the popup is too high the vertical scroll is gone.

Another issue is, that even when it does fit to the page – the top of the popup does not move up so you end up having to move the popup to the top of the page yourself.

This caused great frustration for some of our customers, and by extent – our product manager and support – and by extent – me!

The solution

I knew I was alone in this, since not only Google did not have any solution for this issue – I could not even find someone asking about it in any forums / mailing list.

So, since waiting for a Microsoft fix for this, which may or may not come eventually (after all this issue is introduced with custom development and not on OOB scenarios), I had to dig deep and get dirty with Microsoft JavaScript and popup DOM.

It wasn’t pretty, I tell you, but I did find lots of cool stuff, like a function that calculates the width of the scroll bars in the browser :) (yeah, they actually have a function for it!)

Well, it appears that the popup have few divs and iframe behind it to make it look and work so cool (great job on that Microsoft!), I figured the problem was that the height was not calculating correctly on the second call to autoSize. It disregards the maximum size of the parent window, and does not reposition the window vertically.

I had to do it myself.

I came up with this code, now – it is not fail proof, and might not work on some scenarios – but it did work for me, our QA and our customers. I will appreciate if you have any comments or fixes to this code, or if you know of another more “clean” solution to this issue.

//call autoSize
window.frameElement.autoSize();
//Fix scroll bar and positioning. $kw is our alias for jQuery
var bodyHeight = $kw(top.document.body).height();
var dialogMaxHeight = bodyHeight - 60;
//if dialog is too high
if ($kw(window.frameElement).height() > dialogMaxHeight) {
    //move dialog to top
    top.document.getElementsByClassName('ms-dlgContent')[0].style.top = '8px';
    top.document.getElementsByClassName('ms-dlgContent')[0].previousSibling.style.top = '8px';
    //resize all dialog divs/frames/whatnot
    window.frameElement.style.height = dialogMaxHeight + 'px';
    top.document.getElementsByClassName('ms-dlgContent')[0].previousSibling.style.height = dialogMaxHeight + 'px';
    top.document.getElementsByClassName('ms-dlgContent')[0].style.height = dialogMaxHeight + 32 + 'px';
    top.document.getElementsByClassName('ms-dlgBorder')[0].style.height = dialogMaxHeight + 32 + 'px';
}
//end issue fix

Thanks, Shai.