The ribbon is a massive deal in SharePoint 2010. It is a big deal in all of the Microsoft Office suite, but especially so in SharePoint Server 2010.  And it is a fundamental change to the user experience for everyone. As designers we have to start to tailor our site styles to accomodate its inclusion, and as developers we need to learn how to work with it, rather than against it in order to make for a useful user experience. This is especially true in intranet deployments, where we do a lot of our work, as the ribbon will almost certainly be there all the time.

However, lately we’ve come across a bit of a problem with the ribbon and the current fashion in web design, the fixed width layout. Everyone wants a fixed width layout these days, even on intranets, and there are a lot of really good arguments for having them. There is even a simple way built in to SharePoint 2010 to allow you to turn off the default behaviour of taking up the full width of the browser window. You’ll find plenty of blogs out there telling you how to do this, but personally I’d recommend you just head over to Randy Drisgill’s blog and pick up his starter master pages, as they are not only extremely useful when making custom sites, but also have some great comments in them to tell you where to edit for things like fixed width layouts. Or if you just want the info on setting the fixed width start at his other post here, and go from there.

UPDATE 23/11/2010: This article has been updated as some issues were found with some of the popdown menus on the ribbon when using this method. We have fixed this here using jQuery and a timer, which is not ideal, as ultimately it would be better to use the existing sharepoint core javascript methods (if possible) to position items correctly in the first place. We have been looking through the debug versions of the core javascript, but they are almost completely undocumented and mostly minified so it’s pretty slow going, so you may consider this as an option in the interim. It’s your choice whether or not to use it at the end of the day, and if anyone has any suggestions or help getting over this final hurdle, I’m all ears!

Back to the problem. When you add the class ‘s4-nosetwidth’ to the container with the ID ‘s4-workspace’, and then set a fixed width for your container using CSS, this happens;

Ouch. That’s not pretty. Nor is it where your users expect the scrollbar to be, so they won’t like it either. There are a couple of things you can do here; You could unfloat the ribbon. That way you can use CSS to put the scrollbar back where it should be and your users will feel at home. But, some of the ribbons usefulness is lost. Or  you could add a wrapping container inside the ‘s4-workspace’ container and then fix the width of that instead. This works but still uses a non standard scrollbar that doesn’t look quite right.

We think there is another way. One that allows the ribbon to float, allows the page to use the scrollbar the user is expecting in the place they are expecting it, and look correct. And in essence it’s quite simple. Position: fixed to the rescue.

To achieve this you are going to need to edit your master page, have some custom CSS, and some custom javascript. If you can do all these things, then here’s how it is done. This has been tested as working in IE7 and 8, Firefox 3, Safari 5, and Chrome 6

• Edit your master page in something like Microsoft Office SharePoint Designer and add the class ‘s4-nosetwidth’ to the conatiner with the ID ‘s4-workspace’. Also remove the attribute scroll=”no” from the body tag (this is important for IE7). Add your custom CSS, a link to jquery and your custom javascript file references. There are lots of posts around that can explain how best to do this, but some quick example code is below. Make sure your custom css is loaded after the core SharePoint CSS files.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<SharePoint:ScriptLink language="javascript" name="<your path>/<your custom js>.js"  runat="server"/>
<SharePoint:CssRegistration name="<your path>/<your custom css>.css" After="corev4.css" runat="server"/>

• Add the following classes to your CSS file to reset the scrollbar to normal, fix the position of the ribbon, and float it over the items below it.

/* make the body use it's proper scrollbar again */
body {
overflow: auto !important;
}
/* fix the width of the workspace, centre it and turn off its scrollbar. Also add a default padding to the top to cope with the ribbon in its standard form */
body #s4-workspace {
width: 980px;
margin: 0 auto;
overflow: visible;
padding-top: 44px;
}
/* fix the position of the ribbon, float it above the content and allow it to grow when it's height changes */
body #s4-ribbonrow {
position: fixed;
left: 0;
top: 0;
z-index: 10;
overflow-y: visible;
}

• Almost there. Lastly, we need to add in a bit of custom javascript to cope with the way the ribbon now hides the top of the page, as well as it’s default behaviors of changing height dynamically and hiding the title row when certain tabs are clicked. There is a method within the core init.js file which we can use to tie our function in to ribbon resizes, and we should use padding rather than margin because IE7 copes with it better, so add the following to your javascript file. Also add your jQuery based timer function here to cope with the popdown positioning issue described above.

// function to reset the top margin to whatever the current height of the ribbon is
function setTopPadding() {
var myElem = document.getElementById('s4-workspace'), newHeight = document.getElementById('s4-ribbonrow').offsetHeight;
myElem.style.paddingTop = newHeight + 'px';
}

function setTopPos() {
 $('.ms-cui-menu, .ms-cui-tooltip').each(function(){
 var newTop = $(this).data('origTop') || $(this).position().top;
 $(this).data('origTop',newTop);
 newTop += $('#s4-ribbonrow').position().top;
 $(this).css({
 top : newTop
 });
 });
 }

// bind top padding reset to ribbon resize event so that the page always lays out correctly.
ExecuteOrDelayUntilScriptLoaded(function () { SP.UI.Workspace.add_resized(setTopPadding); }, "init.js");

$(document).ready(function(){
 setInterval(setTopPos, 300);
 });

And once you have this all together, you end up with this!

The right scrollbar in the right place looking correct, so it’s what your users expect with no loss in functionality. It looks right if you fix the width of the ribbon too, which some briefs also require (although there are a whole wealth of issues to consider when doing this in order to cope with the way javascript is used so heavily to customise the ribbon, so be careful and test test test). And there you have it, our better way to scrollbars on fixed width layouts. We would be interested in your thoughts about this option!