A Better Enhanced SharePoint 2010 Floating Ribbon


Category : featured, SharePoint 2010, SharePoint Ribbon

SharePoint 2010 has issues with its scrolling because of the way it implemented the fixed ribbon. Before we look into these issues (and a workaround) let’s first try to understand what SharePoint is doing. Basically, in order to keep the ribbon fixed at the top of the page, SharePoint put’s the scroll bar on the div tag directly below the ribbon (i.e.: s4-workspace) and removes the “normal” scrollbar for webpages (i.e.: the one that is on the body tag). In order to put the scroll bar on the s4-workspace, they set the overflow property of that div tag. But, in order for an overflow property to work, the height and width must be set appropriately. So, SharePoint also runs javascript on the page load to set the height and width appropriately on the s4-workspace div tag.

The issues noted in this blog are particularly bad on Internet facing sites with SharePoint 2010. They are not that big of deal with Intranet sites. So, I’ve found myself using the techniques in this blog on Internet facing sites and not Intranets. These techniques will work for Intranets, but I don’t like to mess too much with a COTS product when I can help it. I can only hope Microsoft fixes this big issue one day.

SP Ribbon Positioning Issues

  1. IPad and mobile browser use: The reason IPads don’t scroll in SharePoint 2010 is because of how they interact with overflow div tags. Scrolling will work on the IPad if you use the “two-finger” technique. But, nobody will know this is a div instead of a main scroll because SharePoint makes this scroll look like the main scroll. Thus, to the normal user, it just looks like scrolling doesn’t work on your webpage.
  2. Anchor tags: Anchor tagging to sections of the page didn’t work. If you have one page www.mywebsite.com?#bottom that links to another page and the section it is linking too is below the scroll area, you get stuck there. It looks really unprofessional when this happens.
  3. Javascript reliance: A core function of a website should not be reliant on javascript (i.e.: the scrollbars).This can produce multiple issues:
    1. Broken javascript: If any other javascript breaks on the page then the entire site won’t scroll anymore. That is one main reason you don’t make a core function of a page rely on javascript. It is hard to control the other javascript on the page and you can get yourself into bad situations over time with these types of techniques.
    2. Slow loading javascript: You have to wait until all the javascript loads on the page before you can begin scrolling. This is really annoying sometimes.

Microsoft has addressed how to disable this ribbon behavior: http://blogs.msdn.com/b/sharepoint/archive/2010/04/06/customizing-ribbon-positioning-in-sharepoint-2010-master-pages.aspx

Microsoft is basically saying, you can turn this on or turn this off. So, for public facing sites, you will probably want to turn this off. However, this means you content editors won’t get the ribbon pinned to the top of the page. This will make editing content in SharePoint very, very hard.

In my opinion, the fixed ribbon positioning system in SharePoint is a really good idea. But, the “unconventional” implementation causes too many issues with scrolling. I think Microsoft could have implemented this better. Specifically, Microsoft could use the “conventional” fixed position style in css instead of this “unconventional” technique of using overflow div tags. Let me be clear: I don’t think overflow div tags are unconventional. I just think it is unconventional to use that as the main scrollbar on a page.


Turn off the ribbon positioning system that SharePoint provides and build your own one with fixed position css styles. The steps are actually pretty simple:


  1. Remove the “scroll=no” attribute from the Body tag
    Note: At this point most people would tell you to remove the s4-workspace tag from your html. In fact, that is what the Microsoft blog mentioned earlier. However, that causes side affects. The gantt chart of task views will stop working, IE7 popups will stop working and anything else that relied on the s4-workspace to be there will stop working. Thus, I do not recommend removing the s4-workspace tag from the html of SharePoint. Instead follow these steps:
  2. Add the following javascript in a script block or an attached javascript file:
    //set top padding of the workspace to the height of the ribbon
    function setTopPadding() {
       var wrkElem = document.getElementById('s4-workspace');
       var ribHeight = document.getElementById('s4-ribbonrow').offsetHeight;       
       if (window.location.search.match("[?&]IsDlg=1")) {
          //margin works better for dialogs b/c of scrollbars
          wrkElem.style.marginTop = ribHeight + 'px';
          wrkElem.style.paddingTop = '0px';
       else {
         //padding works better for the main window
         wrkElem.style.paddingTop = ribHeight + 'px';
    // 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");

    The above script sets a top padding for our workspace element equal to the ribbon height. This is needed because our new ribbon will be css fixed and that is more of a floating technique. Thus, padding is needed so it doesn’t hang over our workspace.

  3. Add the following css:
    body, body.v4.master {overflow:visible !important; height: inherit; width: inherit; }
    body #s4-workspace {overflow:visible !important; padding-top:44px;}
    /*This sets up our Ribbon for a fixed position. */
    body #s4-ribbonrow{ position: fixed;top:0px;z-index:1000;width: 100%;}
    * html #s4-ribbonrow {position:absolute;} 
    /* Set the ribbon popups to be fixed position also */
    #s4-ribbonrow .ms-MenuUIPopupBody, #s4-ribbonrow .ms-popoutMenu, .ms-cui-menu[id ^= "Ribbon."], .ms-cui-tooltip {
    position: fixed !important;
    * html #s4-ribbonrow .ms-MenuUIPopupBody, * html #s4-ribbonrow .ms-popoutMenu, * html .ms-cui-menu[id ^= "Ribbon."], * html .ms-cui-tooltip {
    position: absolute !important;
    /*Make sure there are no scroll bars on our popup overlays*/
    .ms-dlgOverlay {width: 100% !important }

    Note: I used the star hack above for ie6 (ie6 doesn’t recognize fixed positions correctly and absolute must be used instead). I don’t recommend the star hack (it was for blog purposes only). Please use a seperate ie6 file for ie6 specific css.

That’s it! Now you have a fixed css taking care of keeping the Ribbon on top. Why is this better you ask? The SharePoint’s solution uses javascript to create the scroll area. This means javascript is responsible for whether the site functions or not. My solution uses a fixed css property and only uses javascript to fix the height of the ribbon. Even if javascript is turned off, my solution will work. In addition, my page will work for the public view on all browser types (including IPads).

I started off writing this blog using techniques I thought of. However, I ran across two issues that were problematic. One of the issues had to deal with popus/overlays and other issue dealt with the padding at the top after the ribbon was “fixed”. So, like any good developer, I turned to Google. Thus, I have to give credit to 2 blogs that solve the same issues. In fact, both of these blogs seemed to have taken the same approach I did to this problem. Thus, I used techniques from each blog to come to a solution I feel is the best of all worlds.

The first blog that helped in this solution was: http://www.webpoint0.com/blog/fixed-width-layouts-scrollbar-ribbon-sharepoint-2010/. This blog showed me how to set the top padding of the ribbon in the most elegant way. However, the fix for the popups was not the best on this blog.

The second blog that helped in this solution was: http://kyleschaeffer.com/sharepoint/sharepoint-2010-scrolling/. This blog showed me how to deal with the popups and the popup overlays. However, the fix for the top padding of the ribbon was not as elegant as the first blog.

Once again, thank you so much to the blogs above. Their techniques along with the techniques I had already figured out created a great solution to this common problem.


Of course, with any solution that changes the core way a system works, there is bound to be issues. We’ve worked through the most common issues in the approach above, but I am confident we haven’t figured out all the issues. So, as issues come up I will post them here so people understand the trade-offs (and maybe come up with solutions for me).

Issue #1: Calendar hovers and add new

When you hover over a day in the SharePoint calendar the “add new” link comes up. This isn’t working “exactly” right in our solution. The reason is, if you scroll down on the page and then hover over a calendar item, the “add new” link shows up in the wrong calendar day. It works perfectly fine if you don’t have to scroll down (the issue only happens when you scroll). I debugged through the javascript and I found the problem. The core.js file of SharePoint has a function called MenuHtc_GetElementPosition. This function recursively loops through the elements of the html and gets the elements position with it’s scroll position to get the x and y axis of the element. However, it never takes into account the documents scroll position. This kind of makes sense because Microsoft doesn’t use the documents scroll position because it overflows the s4-workspace to do scrolls normally. However, we overrode that behavior and went back to the normal scrolling behavior of browsers. I hoped Microsoft would have realized that people would want to do this, but this is one of those functions where the SharePoint code is a little short sighted.

Experimental Solution: This solution overrides the MenuHtc_GetElementPosition function by creating a customcore.js file that gets called after the core.js file. I left the method exactly the same except for one small change. I subtracted the document.documentElement.scrollLeft from the x axis and document.documentElement.scrollTop from the y axis. This should account for our scrolling now.

Note: Microsoft should consider putting this change into their function in the core.js in the next service pack. It wouldn’t affect their “normal” technique for ribbon scrolling and it would help people that are building custom internet sites on SharePoint. I can’t think of a reason they wouldn’t add this into the product. So, if anyone from the Microsoft SharePoint product team reads this, please consider adding this in the next service pack.

  1. Create a javascript file called customcore.js and put the following javascript in it:
    function MenuHtc_GetElementPosition(element, relativeToElement)
    	var result=new Object();
    	if (element.offsetParent) {		
    		var parent=element;
    		while (parent !=null &&
    			parent !=relativeToElement)
    			AdjustScrollPosition(parent, relativeToElement, result);
    			var parentTagName=parent.tagName.toLowerCase();
    			if (parentTagName !="body" &&
    				parentTagName !="html" &&	
    				parent.clientTop !=null &&
    				parent.clientLeft !=null &&
    				parent !=element) {
            //This is the custom code added to account for scrolling 
            //when the code has been customized to not use 
            //overflows in the s4-workspace
    		result.x -= document.documentElement.scrollLeft;
    		result.y -= document.documentElement.scrollTop;
    	else if (element.offsetLeft || element.offsetTop) {
    	else {
    		if (element.x) {
    		if (element.y) {
    	if (element.offsetWidth && element.offsetHeight) {
    	else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
    	return result;

  2. Save the above solution in 14 hive layouts folder under your language – ex: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\1033

    In addition, save the same file as customcore.debug.js and put it in the same place (Note: if you want a minimum file you can minimize the customcore.js and leave this one around for the debug file)

  3. Replace the reference to core.js
    <SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" />

    with this:

    <SharePoint:ScriptLink language="javascript" name="core.js" Defer="true" runat="server"/>
    <SharePoint:ScriptLink language="javascript" name="customcore.js" Defer="true" runat="server"/>

Comments (48)

Greg Galipeau’s Blog » Blog Archive » A Better Enhanced SharePoint 2010 Floating Ribbon…

Thank you for submitting this story – Trackback from SharePointShout…

Interesting, thanks for the post.

Who uses iPad anyways?

Well Eric, there are so many ways to answer that question:
1. Myself
2. My Boss (more importantly)
3. The issue is on other mobile browsers too, I just didn’t want anyone pointing out that there are mobile versions of SharePoint, so I focused on the IPad which isn’t a mobile phone
4. Regardless, products should work cross-browsers and this is something Microsoft has got better with over the years, but still isn’t perfect. Remember the last version of SharePoint that didn’t work on Firefox?
5. We are seeing steady rising numbers for the iPad on Treasury.gov – so a lot of people are using it and it is only getting larger
6. There are other issues noted in this blog too. I just focused on iPad because I happen to know Microsoft is more interested in fixing something because of cross-browser issues.
7. This goes with number 6 – there is no way that scroll bars should be created by javascript. Since I wrote this article I have found a few SharePoint 2010 sites on the internet that I can’t scroll on in IE. And, when I look at them I see a little yellow symbol in the bottom left corner. So, it looks like these people wrote some bad javascript and thus SharePoint can’t scroll anymore. I’ve never heard of a system who’s scrolling capabilities is reliant on all the javascript on a page working. This a severe shortcoming.

Hello Greg,

I have followed this great blog post with great result: I got the scrolling working properly on iPad and numerous mobile web browsers.
However, I now have encountered a new issue. My modal dialog boxes are positioned correctly as long as I do not scroll, or just scroll down slightly. If I scroll down to the bottom of the page or down on a page with a lot of content, my dialog boxes appear at the top of the page (i.e. I have to scroll back up again to see them). Always when this happens the div (ms-dlgContent) has a top:10px margin.

Given your bug fix for the add item issue I thought that maybe you could provide some insight in how to solve this issue.

Johan Nordholm

Has anyone even thought of the idea that it’s the version of mobile safari running on the iPad that is having the JavaScript issues? I mean Apple blatantly refuses to support Flash because it crashes their ultra-pristine systems. I mean if you can run the SharePoint sites in Safari on a Mac system with no scroll issues wouldn’t this point to the browser on the mobile device as the problem? Has anyone tested this?

Hi Jamie,
First off – it’s not really a javascript issue; it’s the end result of the html that the javascript is creating. It is basically setting the width, height and overflow property of a div so that this particular div can be the scroll area for the site instead of the typical body scroll bar on the webpage.

Second off – there are other problems than just the iPad issue because of this unconventional implementation. I noted these problems in the blog, but I focused on the iPad issue.

So, to your question – yes, there is some blame on the iPad implementation of the Safari browser. Any overflow div tag doesn’t scroll in the iPad without using their double touch technique.

But, the bigger problem here is an unconventional technique SharePoint implements. This unconventional technique produces unexpected behaviors.

Also, this is the same kind of stuff we had to deal with in SharePoint 2007. It didn’t work on all browsers. Microsoft had the same kind of attitude back then (i.e.: it’s not there problem). But, it is everyone’s problem. iPads have to start rendering html the same as all other browsers. And, SharePoint has to use conventional techniques to not get into these issues in the first place. If Microsoft is going to say SharePoint 2010 is truly cross-browser capable, then it should work on an iPad. And, after looking at their code and the code their javascript produces, it is my opinion that SharePoint does something “really” unconventional with their scrollbars. They override the body scroll bar and put an overflow on a div instead. Because of this unconventional technique, they’ve introduced the possibility for issues as this on the iPad and the other issues I’ve talked about in this blog.

Also, if none of the above logic fits for you. Let’s examine one of the other issues (the anchor tag issue). Because SharePoint puts the scroll in a div with an overflow tag, anchor links into the page don’t work. This is on every browser.

Anyways, I am not disagreeing with you that iPad could have produced a better implementation for scrolling within divs with overflow tags. But, SharePoint has the bigger issue in this particular case. And, I am a Microsoft person who doesn’t like Apple that much. So, this statement is saying a lot coming from me.

Greg, thank you for sharing this. Very benificial to have this in my toolbox. Alternatively, I’ve seen people suggest the following:

body { overflow: auto !important; }

How does this work on an ipad ?

great It works

@Jamie – They don’t blatantly refuse to support Flash. They blatantly refuse to allow dll’s to be installed on the device for several reasons.

The most important reason is dll’s provide a security risk which what the great wall of Apple, good and bad, shields the user from.

Focusing on Flash and it’s mountain of security holes, it’s a good thing to not allow it to run and with html 5 and jQuery, you don’t need flash anyways.

It’s also the responsibility of the web creator to ensure it works on all browsers and not the device.

Example in point is Android. Because they allow Flash type dll’s to run. There are security breaks and malware infections a lot. Either you want to feel safe or you don’t care. The consumer makes their own choice when they buy the device.

Everyone needs to take into account that one size doesn’t fit all.

Just wanted to say huge thanks to you as I’ve been struggling with this, using various hacks the last few weeks. This is the most elegant solution I’ve found thus far!

Wow, that’s a complex solution. I found this solution when hiding the ribbon for anonymous users and the associated CSS that it brings back the scroll.


Chris, the solution you provide is actually based in the same concept as this one. We both use css to hide the ribbon. However, that is only half the problem. Once you’ve hidden the ribbon there is a lot more to think of. You will find out popups get messed up, calendars get messed up, etc…

So, you can think of this solution as the “complete” solution and the other solution as the initial step. Obviously, the complete solution will be more complicated than the initial step.

I don’t use CSS to hide the ribbon, it’s a security trimmed control. The CSS resets the browser behavior.

For an anonymous scenario (the focus of my post) no anonymous user adds list items, and in our public facing projects we use custom non-modals as opposed to the modals used by SP.

Do you have anonymous users adding events?

No, we don’t have anonymous users accessing lists. But, that’s not the point I was trying to make. Regardless if you use CSS or security trimmed controls, it doesn’t change the fact that SharePoint puts the scroll bar on the div tag instead of the body. So, when you change that behavior you introduce other issues with code that expects that behavior. So, this blog addresses those issues.

Great writeup Chris, thanks for sharing!

Greg, can you provide some site URLs you know of where scrolling has been fixed on the iPad?


Thanks for the post! I am running into an issue though. It works flawlessly in most browsers, but when I test this in IE7 it is hiding certain elements in my page. My header graphics are taking about 10 seconds to load at times and all graphics in the footer are not loading at all. Can you think of what could be causing this? This is an external facing site and most of our organization uses IE7 unfortunately for everyone involved.

Treasury.gov is a public facing site that uses this technique and works fine on the iPad

I am not sure what is causing your ie7 issue. We are not having issues with ie7. Is your site public facing? If so, maybe I can take a look at it.

Greg that would be great. I am using a test site off of my main site to test this idea. It is https://dof.mc.vanderbilt.edu/test


It’s hard for me to know exactly without modifying your css sheets, but I think you issues have to simply do with the css in your header and footer. I concentrated on your footer since that is the only issue I could reproduce on my side. I loaded up ie developer toolbar in ie7 and I noticed that if I put a float left on the footer element the image would show. IE is notorious for having issues with floats and things that make it act different than other browsers. I think you are hitting one of those issues.
Now, using IE toolbar is not an exact science. So, I am not sure if it is as simple as putting a float on your footer element. However, it does at least show me that this is a css problem related to the specific css in your site.
Good luck,

Thanks for your help. I hope I can get it resolved because we would really like to be able to scroll the Ipad correctly.

Got It!

I have several things going on on my site that complicated the situation. I am using a LoginView to hide the ribbon for anonymous users but show it for logged in users. I like the way we have that functionality working and when I implemented Greg’s solution I had problems in IE7 (…who knows???) as I wrote above. So I decided to use some Javascript to detect mobile browsers (and Ipad) and implement Greg’s solution there. I also had to tweak a few things in my anonymous template since I was hiding the ribbon (if I didn’t I would have a 44px gap at the top).

Once my javascript detects a mobile browser I used a document.writeln statement to write the entire dynamically. If it doesn’t detect a mobile browser it writes the loginview the way I had it before.

Great solution Greg. I’m glad I was able to get it working. Thanks for all your help.

This was a huge help with the iPad issues. But the anchor links in Firefox 3.6.17 are still popping to the top of the page. The anchors now work fine in IE 8. Since I had previously used security trimming on the ribbon, I tried this solution with the ribbon both trimmed and untrimmed. No javascript errors in IE or FF. Any ideas?

I just went through the steps and the my site seems to be working fine. However, the scroll is still being set on the s4-Workspace. Isn’t this solution supposed to convert the scroll to the more traditional browser scroll or does this just remove the JavaScript placement of the ribbon?

Nice slogan :) this article is very useful thanks alot (F)

Nice solution!
But if I change this in the masterpage, the popup pages (e.g. NewForm.aspx) are also affected, in a bad way. The top row(s) of the form are hidden / overflown by the top bar of the popup ribbon. Both on iPad and PC.

This is great!

I am having one issue when I tested this solution, which I hope you can offer some insight.

When I try inserting ‘reusable content’ onto a page, as I move my mouse through the list of reusable content, often the content gets inserted right away, instead of simply presenting it as a preview. When this happens, the reusable content flyout menu closes – in the same way as if I actually clicked on a reusable content.

I forgot to mention the above behaviour only happens in IE – the other browser I am testing with is FireFox.

I determined that the problem occurs when the reusable content HTML is vertically long. The content has to be vertically tall enough to populate beyond the physical fold of the page. If the reusable content vertical real estate is short enough, then I don’t see the problem.

I hope my explanation helps provide more insight.

I found it easier to make a site using Jquery Mobile and then bring the needed SharePoint parts into it. That way I did not have to worry if they were looking at it in an iPhone or iPad. I’ll include a link to a quick video on how to bring SharePoint into Jquery Mobile. Actually its two videos but here is the first, the second is there on the site as well.

This is really great and saved my life :) Really am thank full to you……

great article,
great solution!

the add new issue has bugged me too :)

thanks for sharing!

This seems to be the best solution I’ve found.
But the ribbon appears all in white and hides in less than a second, when I’m not logged in. What can I do to fix it?

Hello Greg,
Great blog post! This is truely the best solution to this very anoying problem that I have found to date.
I have a couple of things I would like to add to make it better!

First, add the below line to the CSS to remove the double-thick title bar on modal dialogs without a ribbon (like Publish this content)
.ms-dialog-nr BODY #s4-ribbonrow {display:none !important;}

Next, to resolve the comment just above that deals with the bouncing of the non-existant ribbon, what I have done is put the padding-top: 44px CSS in a SPSecurity Trimmed Control in the masterpage at the same place I show the ribbon for authenticated users.
Atleast for now, this removes this bouncing for anonymous users and instead shows it for authenticated users. They may not like it but it is better than the general public seeing it on a public website.

GREAT article. I’ve used this technique many times now doing branding implementations. Thank you!

Do you accept guest blog posts?

This didnt quite work straight off for myself due to the way i had already customised the master page potentially, adding an extra div fixed to the top of the page and moving all of the ribbon related parts into it…

This worked for the calendar as required but broke my site actions menu when I was scrolled. My solution has been to add the following 5 lines of code instead of the 2 you have mentioned;

if (element.className == undefined || element.className.toString().indexOf(“siteactions”) < 0)
result.x -= (document.body.scrollLeft + document.documentElement.scrollLeft);
result.y -= (document.body.scrollTop + document.documentElement.scrollTop);

My master page seemed to have a knock on affect on documentElement under webkit so iv had to use body scroll too. Hope this helps anyone else with as strange master pages as myself.

I wonder why my Dialogs lose height after applying the changes you describe. E.g. new calendar item dialog, which is quite tall, is now just 100px in height.

Hi Greg,
DO you mean C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033
c:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\1033 folder?

Hi Jon. Please i need your help in implementing that dropdown menu you have got on your page. I tried implementing same but I got the flyout ones instead.


Greg – I have strange issue ,I have shared documents libraray with 40 folders ,When I try to open folder 22 the scroll goes bottom of the page on share point 2010. Please help me how to fix this issue.

For anyone who has implemented this great solution, but has problems with the calendar not showing the ribbon so that you can edit / delete an event, you may want to consider using jquery’s .on method to show it.

Simply attach .on to (document). Also use ‘.ms-acal-item a’ as your selector. Within the .on function itself, set a setTimeout to eventually set a css ‘display:block’ for the ribbon.

This should show the ribbon once again. Please test.

Our executives like to cruise our SharePoint intranet via iPhone and iPad. We have altared the browser.compat file so that they receive the normal full blown site instead of the mobile template. Using the directives provided by this post helped us create a iOS friendly .master page for our intranet.

Thanks a ton!

“Greg Galipeau’s Blog

Thanks to my father who informed me concerning this webpage, this web site is truly awesome.


Thanks for this, but I’m really new to sharepoint and never used javascript before. So what do I name my javascript file, does it need placing in my jquery folder and how does sharepoint know to call this file.

I only have basic html/css knowledge and have to get our site working on ipads (with no training).

Please help, I appreciate your guidance.

I know this web page provides quality dependent articles and extra stuff, is there any other web page
which presents these information in quality?

[…] : SharePoint 2010, SharePoint Ribbon Update: I have a different approach to this problem now at: http://www.greggalipeau.com/2011/01/28/a-better-enhanced-sharepoint-2010-floating-ribbon/. I suggest using my new approach rather than this blog as it is much more […]