«

»

Oct 29

SharePoint 2013 Workspace Scroll Issue Fix

Some of you may have run into an issue using SharePoint 2013 where the SharePoint created div #s4-workspace does not properly set the height and width of the workspace container. I have run into this problem for accounts not granted administrative privileges (the accounts that are unable to see the SharePoint ribbon). A quick fix for this is to ignore why SharePoint won’t do this and add a method to achieve this yourself. This probably isn’t the best solution but it does make things easier when trying to get an environment fully functional for testing before deploying to Production. To do this you will need to utilize the jQuery library. Any comments or questions let me know.

function FixWorkspace() {
        // if you are using a header that is affixed to the top (i.e. SharePoint Ribbon) put the ID or class here to change the workspace height accordingly.
        var header = '#myHeader';
	var width = $(window).width();
        var height;
        if ($(header).length) {
        	height = $(window).height() - $(header).height();
        } else {
                height = $(window).height();
        }
	$('#s4-workspace').width(width).height(height);
}

$(document).ready(function() {
        FixWorkspace();
});

$(window).resize(function() {
        FixWorkspace();
});

11 comments

Skip to comment form

  1. Robert Wagenaar

    I can confirm the fix works: I’ve created a fixworkspace.js with Ed’s code and included it in our custom branded SharePoint 2013 MasterPages. The scrollbar now works again as expected.

    This saved us a lot of time, thanks!

  2. Aza

    This script also worked for me on 2010. I had to add the following to adjust it but it worked:

    height = height – 35;

  3. Dayiskua

    Hello, this script works perfectly even if you have bootstrap on your SharePoint project. Thanks for this post.

  4. Paul

    Thanks for the snippet, I had an issue on the iPhone safari but this solved it. Many Thanks!! 🙂

  5. faisal

    this script works but suddenly after some seconds its revert to default value.
    I am using sharepoint 2010 with bootstrap v3

    1. Ed

      This happens because SharePoint’s JavaScript executes and probably overwrites the values, since it’s setting it’s own height/width maximums. Try fixing by either using jQuery to change the CSS itself, $(‘#s4-workspace’).css(‘height’, height + ‘px !important’).css(‘width’, width + ‘px !important’); If that doesn’t work make sure your JS is executing after SP.js so your height/width overwrites whatever voodoo magic SharePoint does.

      1. faisal

        Hi ED,
        I tried this thing, still issue is same.
        calling my ‘js’ just before the end of tag.. still its overwritinig….
        do you have any idea, which SP.JS have this functionality?

        1. Ed

          I’m sorry I don’t know which exact file. I assume it’s in the global SP.js file. Try to wrap the code in a setTimeout() function with a delay of 2 seconds and see if it works. If so you can know for sure that SP.js is overwriting it, then it’s just a matter of making sure your JS file is loaded after SP.js.

  6. Binit Kumar

    Great post. Finally, someone who encountered the issue and has a great solution. I implemented the solution and it works great. However, instead of using var header = ‘#myHeader’; I just set the workspace height to $(window).height().

    Things work well right now but I am just wondering if there’s a reason for you to have placed the if else condition in the function. Maybe I don’t understand what comments in lines 2 & 3 really mean.

    1. Ed

      If you are using the standard SharePoint ribbon as your header, you won’t need to define the #myHeader. Several of the SharePoint sites I’ve developed the client insisted on an additional header (especially for public facing sites) and sometimes did away with the SP ribbon entirely. Since the header would live inside the #s4-workspace it would become part of the scrolling document. So the if/else is there to ensure if you have a static header of your own to deduct it from the overall height of the document/viewport.

      Hopefully this helps answer your question. If you need anything else just let me know!

  7. Ben Weeks

    A quick potential fix using just CSS would be as follows:

    #s4-workspace{
    height: 100% !important; /* Stops scrolling in the emulator though, but seems to work on the phone */
    }

    Where this is only loaded when the size is a certain iphone5 dimension. You can do this with JS:

    var iphone5max = 360;
    var iphone5min = 290;
    loadCss(_spPageContextInfo.siteServerRelativeUrl + ‘/Style%20Library/CBRE/CSS/CBRE-responsive-iphone5.css’, iphone5max, iphone5min);

    function loadCss(url, maxWidth, minWidth) {
    var media = “screen and (max-width: ” + maxWidth + “px) and (min-width: ” + minWidth + “px)”;
    var css = document.createElement(‘link’);
    css.rel = ‘stylesheet’;
    css.media = media;
    css.href = url;
    document.getElementsByTagName(“head”)[0].appendChild(css);
    }

    Or you could use the @media rule.

    @media screen and (max-width: 360px) {
    #s4-workspace{
    height: 100% !important; /* Stops scrolling in the emulator though, but seems to work on the phone */
    }
    }

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=""> <s> <strike> <strong>