Hiding the SharePoint Ribbon from Anonymous Users

Working on a couple of public-facing 2010 sites hiding the ribbon has become an issue in each of them (I’ve noticed several public-facing 2010 sites that don’t hide the ribbon, but that’s not an option if you want a clean brand). Searching for the solutions turned up a couple of solutions, but neither solution in itself turned out to be the best option.

Searching I found this Technet forum post. In that solution it is a complete CSS solution using a control detecting anonymous and logged-in users. This solution works just fine, but I wasn’t happy with simply hiding the ribbon. If I didn’t need the ribbon why waste all that load time and HTTP requests to load it only to hide it?

This led me to look for another solution, and I found another one that used security trimmed controls to not load the ribbon if not logged in. This was great! I was excited until I logged out to test, and I then realized the vertical scrollbar was hidden. The reason for this is because SharePoint 2010 hides the vertical scrollbar and adds in a custom scrollbar to stick the ribbon to the top. When you hide the ribbon the scrollbar doesn’t show because SharePoint uses overflow: hidden; in CSS for the body so it can handle the scrollbar.

The Hybrid Approach

This led to take both of them to construct the best solution. I used the security trimmed control to hide the ribbon, and then I used the control from the forum post and modified the CSS to handle the scrollbar. Here are the steps combining both of the solutions and including my addition.

1. Add the following before the start of the ribbon.

<Sharepoint:SPSecurityTrimmedControl runat="server" Permissions="AddDelPrivateWebParts">

The ribbon starts with the following HTML.

<div id="s4-ribbonrow">

2. Then close the security trimmed control at the end of the ribbon. It should look like the following.

<Triggers>
 <asp:PostBackTrigger ControlID="WebPartAdder" />
 </Triggers>
 </asp:UpdatePanel>
 </div>
</div>
</SharePoint:SPSecurityTrimmedControl>

3. Add the following outside of the security trimmed control (I put it before, but it doesn’t matter). You’ll notice now the body is set to scroll on overflow, and since it’s on the page it will trump the SharePoint style due to the cascade.

<asp:LoginView id="LoginView" runat="server">
 <AnonymousTemplate>
 <style type="text/css">
 body { overflow-y: scroll !important; overflow-x: hidden; }
 body #s4-workspace { overflow-x: hidden; overflow-y: auto !important; }
 </style>
 <!--[if lte IE 7]>
 <style type="text/css">
 html { overflow: auto !important; overflow-x: hidden; }
 body { overflow: auto !important; }
 </style>
 <![endif]-->
 </AnonymousTemplate>
</asp:LoginView>

Note: This supports IE 6 kind of. It will give a vertical scrollbar, but another one is also added. If I’m forced to find another solution I’ll post it, but I’m sick of IE 6.

This also fixes scrolling on iOS devices as well which don’t take kindly to the way SharePoint 2010 does scrolling by default. Hiding the ribbon alleviates the problem and returns one-finger scrolling.

UPDATE: I realized while implementing this for a client that the permissions level to keep the ribbon from loading was too high. I have since changed the permission level from ManageLists to AddDelPrivateWebParts (a role on the OTB contribute group, because why would you have read only users authenticate?). If you use a custom role be sure to match the lowest authenticated user to a role in this list on MSDN.

15 Responses

  1. @SPJeff April 22, 2011 / 11:21 pm

    Very cool, thanks Chris.

    The ribbon can be a hog eating up prime viewer space on branded sites. I tried the first fix before and got stuck on the scroll bar issue. Thanks for writing up the hybrid solution.

  2. David Haughton July 6, 2011 / 3:01 pm

    Thanks a mil… I was stuck on the scroll bar and you solved this for me. Cheers.. Im a newbee, but your writing style and clear explaination allowed me to understand and implement your solution.. Thanks.

  3. Andrey October 9, 2011 / 12:08 pm

    Thanks, it works! During this year I finding the solve of this problem and found it here.
    Let see to the text “because why would you have read only users authenticate?”.

    In my case site can’t accessed anonymously. As result two sections of your code have different scope of work. Ribbon seen by users who can edit. But scrolling correction work only if user — anonymous? My users who can read and can’t edit can’t scroll long pages!

    Now I exclude “anonymous” restriction for scrolling correction code. But users who can edit see two scroll bars :-)

    Is way to resolve this exists?

    • Chris Poteet October 9, 2011 / 2:25 pm

      Are you wanting to hide the ribbon even for authenticated users? My solution is only for removing the scrolling behavior for anonymous users. Here are some other possible solutions: blog post.

  4. Andrey October 10, 2011 / 12:22 pm

    We can use two constructions from ASP to hide/show some code for anonymous/authenticated users.

    anonymous users only

    Authenticated users only

    Please make clear why we used one construction from ASP and second from SharePoint?
    May be I do not understanded some hidden things?
    Other question: If user have maximum rights for list manipulation (ManageLists), he will have the ribbon but also have second scroll bar? (In my case — he will).

    Any way, the css code of scroll bar correction — best from all I seen before. Thank you!

  5. Andrey October 10, 2011 / 12:29 pm

    Sorry for previos post — the code was cuted by the system.
    It was construction asp:LoginView:
    LoggedInTemplate — Authenticated users only
    AnonymousTemplate — Anonymous users only

    • Chris Poteet October 10, 2011 / 12:41 pm

      SharePoint regularly has different controls and markup from ASP.NET. Just use the one for SharePoint.

      Did you include the CSS as well? Not including it might cause the double scrollbar.

  6. Andrey October 12, 2011 / 11:57 am

    I reviewed my code. You are right. No double scroll bars. In my case I have no scroll bar for all users with permission “readers”. Page can’t scrolled to the end.

    I use Andy Drisgill “starter_foundation.master”.
    asp:LoginView block placed before “body” tag.
    When the user authenticate himself he do not see the Ribbon.
    But scroll bar correction CSS do not worked because this user is not anonymous.

    Then I was removed the “anonymous” section of LoginView ( CSS code only). All good, but admins (who can see the Ribbon) see two scroll bars.
    In my case — admins — it’s me only :-) And this bug not too importnat. So, I’m happy.

    Sorry for my English.

  7. Tracey Nolte November 27, 2011 / 10:37 pm

    Or if your using Randy Drisgill’s masterpage, just comment out the overflow statement and keep the security trimming like this.. it fixed it for me on this site: http://www.baltimoresug.org

    /* hide body scrolling (SharePoint will handle) */
    body {
    height:100%;
    /*overflow:hidden;*/
    width:100%;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>