SP2010 Branding Tip #11 – Un-Floating the Ribbon in custom Master Pages 8

In the 2010 out of the box master pages, Microsoft has included code that causes the ribbon to float above the rest of the page content (you might say it sticks to the top of the page). You can see the effect here:

image

See how the right scroll bar stops at the ribbon? That’s the new functionality at work. It makes editing the page a nicer because you don’t have to scroll to the top of the page constantly.

But what if you are doing a VERY stylized branded SharePoint site? Sometimes this functionality can get confused, especially if you are using CSS to position the body “fixed”. I saw this happen recently when Paul Keijzers (@KbWorks on Twitter) was having problems using my Starter Master Pages (http://startermasterpages.codeplex.com). His problem would have been the same if he used Microsoft’s v4.master.

So, how do we make the page scroll in a more traditional fashion? Pretty easy, just follow these steps in your custom master page (or css):

  1. Remove or override the CSS that hides the body overflow – body { overflow:hidden; }. You can override with body { overflow:auto; } Note: if you are using v4.master, you need to override this with body.v4master { overflow:auto; }
  2. Remove scroll=”no” from the tag
  3. Remove ID=”s4-workspace” from the
    tag that surrounds the page content (below the ribbon). You can remove the entire <div> tag and its corresponding </div> if you would prefer.

Save and check-in / approve and you should have a page that scrolls normally. The ribbon will stay at the top and scroll off the page if you have a lot of page content. Note, there may be an easier way to do this by using something like the class=”s4-nosetwidth” code that takes away the width setting, but I haven’t been able to find anything that would change the scrolling behavior.

8 thoughts on “SP2010 Branding Tip #11 – Un-Floating the Ribbon in custom Master Pages

  1. Reply kiteboardertje Jan 15,2010 2:42 pm

    Hi Randy,

    Thanks for helping me poin into the right direction.

    your Master page is the bom it is really great.

    kind regards,

    Paul Keijzers
    @KbWorks

  2. Reply sbr0 Jan 15,2010 3:19 pm

    I am wanting to add a footer that sits at the bottom of the page. If I put it below the scrolling region then it is always below “the fold.”

    My footer has a height of 20px. I need to change the JS so it subtracts 20px from the height from the scrolling region.

  3. Reply Deepak Feb 2,2010 5:57 pm

    Those three points was awesome…. was able solve my invisible scroll..

  4. Reply jaikirdatt Jul 28,2010 2:41 pm

    You cannot remove the div with id ID=”s4-workspace”, if you do, then the gantt view will not show up.

  5. Reply Randy Drisgill Jul 28,2010 2:55 pm

    jaikirdatt, well… isn’t that annoying. I’m not sure what would be the best solution if you needed the gannt chart also. I’ll have to think about that.

  6. Reply matt Aug 4,2010 11:14 am

    Im battling with this as well. Im finding the dialog boxes that Sharepoint uses don’t size correctly if the s4-workspace tag is removed. I am convinced that the solution lies within CSS (force the s4-workspace to be overflow:visible if not in a dialog and auto if its the decendant of a dialog box div tag) but Ive not yet found a way of forcing this using my own style sheets. Any ideas would be gratefully received.

  7. Reply matt Aug 4,2010 11:47 am

    Randy – Ignore my last comment. I have been having one of those ‘special’ afternoons. Was uploading a stylesheet but not linking it correctly.

    Found wisdom in leaving the s4-workspace tag in there and adding the following to the stylesheet:

    body #s4-workspace {
    left:0;
    overflow:visible;
    position:relative;
    }

    html.ms-dialog body #s4-workspace {
    overflow-x:auto;
    overflow-y:scroll;
    }

    Thanks for the master pages also. Very useful.

Leave a Reply