Sharepoint 2013 – some thoughts about sticky footer the sharepoint resize event and DOM breakpoints

Lately on a SP 2013 project where we had a sticky footer, we were facing a problem lots of people currently face: SharePoint calculates the height (and width by the way) of the s4-workspace div based on the window object size.

It means that the workspace does not consider the footer, and when the content needs a scroll, the scroll is hidden behind the footer.. not cool :|

After spending some time and hitting the wall, I got a solution that’s not too ugly..

1st try
Add an event listener to the window resize event and subtract from the s4-workspace height the height of the footer.  And it worked…. for a second only.. then the SP event that recalculates the size would override it again. It was a dead end.

2nd try
It become obvious that I needed to understand what method was being called by SharePoint to calculate the sizes. But I didn’t find a way to see all the event listeners attached to the window element.

Then I looked at the problem from another angle. What do I know?

I know SharePoint is changing the size of the s4-workplace div. How can I find where and how does he do that? The answer is the DOM breakpoints.

Using Chrome developer tools, I selected the s4-workspace div and the selected “Break On…”, “Attributes modifications”:

dom breakpoints

Then I resized the browser window and the code stopped on the exact spot where a modification for the workspace div attributes was operated. The function happened to be on the global scope, and the only function on the call stack:

dom-breakpoint-stack

So now that I know that the name of the function that SharePoint uses to calculate the size of the workspace div, I can remove the height of the ribbon. I did it by saving the original function to a variable, and replacing the function with a new one that calls the original one and right after removes the footer height from the workspace div:

var originalResizeFunction = FixRibbonAndWorkspaceDimensions;
FixRibbonAndWorkspaceDimensions = function()
{
    //let sharepoint do its thing
    originalResizeFunction();

    //adapt to the footer size (assuming  #footer is the footer element)
    $("#s4-workspace").height($("#s4-workspace").height() - $("#footer").height()
}

Remember to call this script after the init.js of SharePoint is loaded. Do it either at the end of the DOM or use the ExecuteOrDelayUntillScriptLoaded method.

Now the workspace adapts perfectly to the footer and the scrollable content does not hide behind it.

Cheers!

2 thoughts on “Sharepoint 2013 – some thoughts about sticky footer the sharepoint resize event and DOM breakpoints”

Leave a Reply to Adam Cancel reply

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

CAPTCHA Image

*

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>