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 won’t 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 without 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 am 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;
}
Thanks for reading.
nice post. it is very use full for me
ReplyDeletehi
ReplyDeleteThanks
ReplyDeleteThanks for this post. Its Very useful to me
ReplyDeleteThank you very much, This post is very useful to me.
ReplyDeleteI am having an issue with Scrollbards in Modal popups, As this causes because by moving the Ribbon inside the workspace and made the fixed width layout, for this Scrollbars not working for Dialogbox by adding css html.ms-dialog body #s4-workspace {overflow-x:auto;overflow-y:scroll;} not helps, only i can give to .ms-bodyareacell{max-height:600px;overflow-y:scroll;} but its not working it loosing the default width, any help would be appreciate
ReplyDeleteThanks! It resolved scroll bar issues in dialog box.
ReplyDelete