Skip to main content

Un-Floating the Ribbon in custom Master Pages















we 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.

o, 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
    tag and its corresponding
    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.

Comments

Popular posts from this blog

SharePoint 2010 Branding: Change site actions and welcome menu arrows

Here's how you can do it. Hide the image and give our custom image element a background image. Look Like: .ms-viewselector-arrow {     background: transparent url('/PublishingImages/images/Arrow.png') no-repeat scroll 0 0;     height: 4px; /* height of the image */     width: 5px; /* width of the image */ } .ms-viewselector-arrow img {     display: none; }