Fix Disabled Page Scrolling on Navigation Settings

September 28 2010 24 comments

When it comes to semantic and well-formed markup, SharePoint 2010 lags a little bit behind. Unclosed HTML tags, inline styles and script, unique classes and not-so-unique IDs with random naming conventions are your usual opponents in the battleground where the older generation Internet Explorers still roam.

The prime example of this is the Navigation Settings page (/_layouts/AreaNavigationSettings.aspx) in the layouts folder. The rendering of this page is likely to fail if you’re using relative positioning or your layout exceeds the complexity of an unicellular organism. As we know, the Ribbon positioning system disables the scrolling ability of the body tag and re-creates it for the div with an ID #s4-workspace. To accomplish this, it uses Javascript to calculate the heights required for the scrolling to occure.

The DOM is a terrible thing to break

The question – What happens if the DOM is broken?

If the DOM is broken due to unclosed or misplaced tags, the script won’t run and the page won’t get its scrollbars. The user won’t be able to scroll and you don’t get the cigar. Because we all like scrolling, this needs to be fixed. I’m sure Microsoft will fix this eventually as this particular page has been broken since MOSS 2007 but in the meantime, a quick workaround is all we need. We are not going the edit the page itself as that is something Microsoft will have to sort out themselves. Instead we’ll use my favourite Javascript library, jQuery to take care of the situation.

If you do a view-source on the page, a form aspnetForm with an action=”AreaNavigationSettings.aspx” is present just after the body tag. This is how we determine our scope for the jQuery magic where we’ll disable the Ribbon positioning mechanism for this particular page that gives us hemorrhoids.

$(document).ready(function() {
    $('form[action="AreaNavigationSettings.aspx"]')
        .closest('body')
        .css('overflow', 'visible')
        .find('#s4-workspace')
        .css('overflow', 'hidden');
});

Popularity: 3% [?]

24 comments to “Fix Disabled Page Scrolling on Navigation Settings”

  1. Nick Larter says:

    I love this blog! Thanks guys, this just saved me some serious CSS heartache.

  2. Jordan says:

    I’ve been searching my master page for answers to why this wasn’t working. Thanks.

    In stead of just disabling the ribbon positioning, I just redid the calculations and applied it. It runs on the load of the page and on the resize of the window.

    [code]
    $(document).ready(function() {
    $(window).load(function() {
    $('form[action="AreaNavigationSettings.aspx"]')
    .find('#s4-workspace')
    .css('width', window.innerWidth).css('height', window.innerHeight - 171);
    }).resize(function() {
    $('form[action="AreaNavigationSettings.aspx"]')
    .find('#s4-workspace')
    .css('width', window.innerWidth).css('height', window.innerHeight - 171);
    });
    });
    [/code]

  3. Tony says:

    Thanks!! Exactly what I needed!

  4. Regz says:

    Thanks a lot – this works :)

    I’m just unsure where to put this. Should it be in the masterpage, which then have to render this script every-time the a page is loaded or where???

  5. John says:

    You can fix the issue without javascript. This problem is with the master page and the placement of placeholders in the head area. Make sure that you have “PlaceholderAdditionalPageHead” at the bottom just above the closing head tag. If “Scriptlink, CustomJSURL or SoapDiscoveryLink” placeholders are after the “PlaceholderAdditionalPageHead” you will get disabled scroll bars.

  6. Barry says:

    I went a similar route as Jordan, but instead of setting the #s4-workspace height to the window, I set it to $(‘html’).height() – 50. This resets the height to the entire height of the html document minus the height of the share point ribbon bar I have at the top of the page.

  7. w00tme says:

    We had a different solution. We had a extra space after the word “server”. When we removed the space after the ” and before the /> the navigation functionality returned to normal.

  8. w00tme says:

    Here is the problematic code sorry.

    [code]

    [/code]

  9. Shane Perran says:

    I am using bootstrap (the SharePoint port) and none of the above have resolved the issue for me on the settings/navigation page. :/

  10. Tuukka Uskali says:

    Hi Shane, I’m unable to reproduce the issue with plain bootstrap (the codeplex SP port). Does running document.body.style.overflow =”auto”; on browser console do anything that could give you a hint on where the problem might lie?

  11. Shane Perran says:

    Strange, that’s the one I’m using also. I just re-uploaded the bootstrap master page to take another look without any modifications and same thing.

  12. Shane Perran says:

    Now that I think of it, there are two ports on codeplex. One is from the PixelMill folks (thats the one i’m using). There is another sandbox solution that I seen up there as well.

  13. Tuukka Uskali says:

    Shane, the Pixmill SPBS version binds jQuery to $j with var $j = jQuery.noConflict(); So that’s the reason it isn’t working. I do that as well because SP reserves $ namespace in some occations. So for example in your bootstrap-custom.js, add:

    $j(function() {
        BindTopNav();
        BindWPMenu();
        BindBodySpans();
        $j('form[action*="AreaNavigationSettings.aspx"]')
            .closest('body')
            .css('overflow', 'visible')
            .find('#s4-workspace')
            .css('overflow', 'hidden');
    });
  14. Shane Perran says:

    Thanks a bunch, I’ll give it a whirl.

  15. Hi everyone,

    Just a heads up that in the CodePlex project, Responsive SharePoint – Bootstrap for SharePoint 2010, the scrolling bar on the navigation page was fixed in beta v 1.0.4. You can read about the issue and the fix at:

    https://responsivesharepoint.codeplex.com/workitem/1352

    It is possible that our fix may help others with their own custom master pages. Basically how v4.master loads its OOTB js may not play well with custom js.

    Eric

  16. If you desire too obtain much from this piece off writing then you havge to apply these methods to your won
    webpage.

  17. My brother suggested I would possibly like this website.
    He was once entirely right. This submit truly made my day.

    You cann’t imagine simply how so much time I had spent for
    this info! Thanks!

  18. I go to see each day some blogs and information sites to read posts,
    but this blog presents feature based content.

  19. Jesenia says:

    It detangles and circumstances hairr without leaving a waxy really feel onn the hair.

    My page :: best shampoo for thinning hair and dry scalp,
    Jesenia,

  20. Nevertheless, it genuinely is for most acne
    sufferers the important to acne totally free skin iin the extended-term.

    Feel free to surf too my webpage; does acnezine Really work

  21. Ethan Emick says:

    Not to hijack this thread, but, I’d like to see Atlanta dentists and I have no idea where to look… do you have any info on this Atlanta dentist? They’reIt’s in Atlanta, only 15 minutes from my appartment. I can’t find reviews on them – Exceptional Smile LLC, 4420 Bankers Cir, Atlanta, GA 30360 – (678) 841-8800

  22. Rizwan Allen says:

    General Failure’s Fault. Not Yours.

  23. Estoy sorprendido de encontrar webs donde hallar informacion tan util como esta. Gracias por poner este post.

    Saludos

  24. Shweta says:

    Even i am facing the same issue, can you please help?

Leave a Reply