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;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s