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