Wednesday, February 9, 2011

No Scrollbar in SharePoint Dialog

Today I had a strange CSS issue. The SharePoint 2010 dialog had no scrollbars anymore. I found out that this was cought by the styles of the body element.

body {width:100%;height:100%;overflow:hidden}

Yes the overflow:hidden caused that the wrapper div could not determine the height. So I checked the html of the site within the dialog and found out that there is an attribute "tabindex" in the body tag.

HTML of Dialog

You can use this attribute to override the overflow style and the scrolbars are back.

body[tabindex] {overflow:auto }

1 comment:

Brandon Kirk said...

A few users and I had run into the problem of not having a scroll bar when customizing our master pages on SharePoint. This can be annoying at times when using SharePoint and not having a scroll bar.

Here is what we have come up with.

You need to add:

< div id=”s4-workspace” >

< div id=”s4-bodyContainer” >

around the main body content.

Make sure body tag contains “scroll=no”
The style sheet defines the div tags to scroll.
It also used those div tags to calculate the size of the dialog boxes.
The dialog boxes use the “class=’notdlg’” to determine what not to show.

The process is pretty self explanatory and you can view the finished product on our website.

Shawn Zernik