The new Ribbon functionality in SharePoint 2010 can cause some frustration when creating custom master pages. The trick is to develop a master page with the ribbon always on top of your page without losing functionality and keep the content scrolling working correctly. Sometimes the scroll bars seems to grow outside the browser window leaving the end-user unable to scroll to the bottom of the page. Chances are that you forgot some HTML in the master page.
How does it work?
SharePoint 2010 fixes the Ribbon to the top of the page using CSS. In order to display the scroll bars correctly a JavaScript runs to update the height of certain HTML elements. It does this by dynamically adding the style attribute to the targeted HTML tag. So in order the have a fixed ribbon with correct scrolling content you need:
- JavaScript to calculate content height
- A <div> element containing the ribbon
- A <div> element containing the actual SharePoint content
- Some CSS to hide / display the correct scroll bars
Luckily most of this functionality is already build-in in SharePoint 2010. You need to make sure that when creating a custom master page you include the correct HTML elements and JavaScript pieces. Here is how.
Adjust the master page.
For this tutorial I assume you are confident with HTML, you know what a master page is and how to edit a CSS file in a SharePoint environment.
Open your master page and look for the body tag. Add the attributes scroll=”no” and class=”v4master” to the body tag. So you get the following.
<body scroll=”no” onload=”...” class=”v4master”>
Leave the onload attribute as is.
Next make sure that in your HTML you have a <div> element to contain the ribbon. Do this by adding the following HTML element to your master page.
<div id=”s4-ribbonrow” class=”s4-pr s4-ribbonrowhidetitle”>
If SharePoint finds this <div> element it will inject the Ribbon at this place.
Immediately after the closing tag of the above <div> , add the following div elements.
<div id=”s4-workspace”>
<div id=”s4-bodyContainer”>
<!-- Your content goes here -->
</div>
</div>
The s4-bodyContainer will be your main working pane. Add all your layout code, navigation, webpartzones, SharePoint controls, etc… go in this div element.
Finally you need to add the JavaScript that will dynamically calculate the height of the s4-workspace. Do this by adding the following JavaScipt code in the <HEAD> of your master page
<script type=”text/javascript”>
var _fV4UI = true;
</script>
To be correct: this is not actually a script. You just declare a variable. The _fV4UI indicates to SharePoint that the page is a version 4 type master page ( version 4 = SharePoint 2010 master pages).
The CSS.
All the necessary elements for your fixed ribbon, scrolling content SharePoint page are now in place. Add these CSS styles to display or hide the scroll bars on the correct <div> elements.
body #s4-ribbonrow {
background-color: lime;
overflow-y: hidden;
min-height: 43px;
}
body s4-workspace {
overflow-y: scroll;
overflow-x: hidden;
}
body #s4-bodyContainer {
width: 760px;
}
I added a fancy green color to the ribbon to make the changes more visible. Play a little with the CSS until you are satisfied with the result.
Happy branding..
Read Full Post »
