Add left and right margins or padding to custom v4.master (s4-bodyContainer)?
-
10-12-2019 - |
Question
How do I add margins/padding to the left and right of the master page while still retaining the scroll-bar on the right?
I don't want a fixed-width page - just scaling width, with left and right margins.
The issue I see is that some JavaScript hard-codes the inline width of the s4-bodyContainer. This throws out any margins/attempt that I attempt to add to my CSS (it overflows right).
I've tried a 100% width !important without any luck:
#s4-bodyContainer
{
margin-left: 50px;
margin-right: 50px;
width: 100% !important;
}
Solution
I general you will find all on my blog that needs to be done: http://www.n8d.at/blog/centered-fixed-width-design-in-sharepoint-2010-the-fast-way/
What you need to do is:
div.s4-title.s4-lp,
body #s4-mainarea,
#s4-topheader2,
#s4-statusbarcontainer{
margin: 50px;
padding: 0px;
float: none;
background-image: none;
background-color: white;
}
1) What you also nee to do is change:
<div id="s4-workspace">
to:
<div id="s4-workspace" class="s4-nosetwidth">
2)
<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle">
needs to be changed:
<div id="s4-titlerow" class="s4-pr s4-notdlg s4-titlerowhidetitle s4-nosetwidth">
By setting the s4-nosetwidth class SharePoint won't add the javascripts to set the width of the page. I haven't tried this out yet but is should work.
OTHER TIPS
Peter,
For this I usually take a table with three <td>
, wrap the bodycontainer in the middle td so that even if its 100% it doesn't get outside the <td>
...
and then first and last <td>
to be used for spacing/left-right margins! give width=50px
to these two td's