Addressing problems with SharePoint Core script by extending Javascript

Every now and then I come across a problem with the SharePoint core script.

In this case I have an issue with the workspace dimensions when viewing on narrow screen.


The page initially loads with the ribbon buttons at their regular size but wrapping onto two lines.



A moment later the ribbon is automatically adjusted to fit.


But now there is a space at the bottom of the screen below the SharePoint workspace canvas.



The naive developer in me is urged to fix this using CSS. We could make the SharePoint workspace 100% high. Or use some jQuery to change the height of the workspace to match the window height.


In my experience I have learned not to play too much with the workspace in SharePoint using custom code as it will most definately lead to other problems.


To resolve the issue it is much less invasive to extend the SharePoint script which is initially causing the problem and fix it at the source.


When I inspect the ribbon buttons I notice that a particular class is added depending on the screen size. This class name determines the size of the buttons.



This class name is applied to the buttons from the init.js file. This was evident after searching the
SharePoint scripts for the classname.



The array g_ribbonHeaderScaleClass is used from inside this function.



 - This is the source of our problem!


Now we just need to extend this function while adding some extra code.


What this function is missing is a call to the FixRibbonAndWorkspaceDimensions() function which is used each time the window is resized so that the workspace is the correct width and height.


To extend the _ribbonHeaderScaleIndex function, we do the following.


SP.SOD.executeOrDelayUntilScriptLoaded(function(){ var old_ribbonHeaderScaleIndex = _ribbonHeaderScaleIndex; //Create reference to original function /* Override original function */ _ribbonHeaderScaleIndex = function () { /* Call original function */ old_ribbonHeaderScaleIndex.apply(this, arguments); FixRibbonAndWorkspaceDimensions(); console.log('Fix workspace dimensions'); } }, "sp.js");

By adding this code to the page we solve our issue! This will allow the intended code to run as usual but with an additional piece that we need.



Author bio

Ian Jackson
Ian Jackson
Front End Solutions Architect
I help bring our designs to life on the front end while collaborating closely with the UX team. Always ready to tackle any project head on no matter how daunting, I like to keep on top of all things new and exciting in the world of web development.


comments powered by Disqus

Related Articles

Sign up to our ClearThought newsletter

Get inspired and learn something new by subscribing to our FREE newsletter. It’s full of ClearPeople's thought-leadership whitepapers, blogs, events, and much more. We promise to not use your email for spam.

Closing this message and/or accessing our website tells us you are happy to receive all cookies on the ClearPeople website.
However, if you would like to, you can change your cookies settings at any time.