Monday, March 05, 2012

Sharepoint 2010 Fixed width Master Page Styling, no scrollbar issues.

Recently I have created a custom master page for our new SharePoint server, First I have noticed that when the page loads, SharePoint  runs a java script function and sets the width of the page.

It is searching for the div tag  with Id  #s4-workspace  and if it finds one with this id, sets its width to fit the content. So I have added a class  s4-nosetwidth. If we add this class to s4-workspace,SharePoint wont set its width.

But very first time when I tried to create fixed width master page, I have faced so many issues with scroll bars and SharePoint modal dialog windows are not opening correctly. They are opening either with in  small height  and added scroll bars or  opening in fixed width and height with out scroll bars.

Mainly IE7 adding its own scroll bar to body  , as the page is fixed width so the scroll bar that is showing in the middle of the page is looking pretty ugly. I have fixed all these issues and below is the styling.

html{
    background-color:#55A0A7;
    overflow/**/:auto;   
}

body.v4master {
    width:1024px;
    margin:0px auto;
    overflow:visible;
    background-color: transparent !important;
}

.ms-dialog body.v4master {
    height: 100%;
    overflow: hidden;
    width: 100%;
}
body #s4-workspace {
    left: 0;
    overflow: auto !important;
    overflow/**/: visible !important;
    position: relative;
    width: 100% !important;
    display:table;
    border-spacing:0px;
}

.ms-dialog body #s4-workspace{
    display:block !important;
    overflow/**/: auto !important;
}