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:
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):
- 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; }
- Remove scroll="no" from the <body> tag
- Remove ID="s4-workspace” from the <div> 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.
6 comments:
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
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.
Those three points was awesome.... was able solve my invisible scroll..
thanks!
You cannot remove the div with id ID="s4-workspace”, if you do, then the gantt view will not show up.
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.
Post a Comment