3

On a Sharepoint 2013 on-premise when we open a page with the parameter IsDlg=1 the ribbon gets squeezed on Chrome (it looks OK on Firefox and IE), even if the ribbon has plenty of space.

Here is how it looks like with Chrome:

the ribbon in modal from Chrome

And what we except to see (behavior in IE and Firefox):

the ribbon in modal from Firefox

I searched into the different JS files loaded by Sharepoint but I haven't been able to find how to change/fix this behavior.

If I use the Responsive View on Firefox and if I reduce the window size, then the ribbon is dynamically squeezed when the window size is very small. So I guess there is a JavaScript function that calculates the available width and rebuilds the ribbon based on it. My guess is that function doesn't work properly with Chrome.

Our masterpage has the HTML5 doctype.

Any help will be appreciated.

Thanks

  • The ribbon is (kind of) responsive. It will shrink / expand and hide / show elements to fit the given space. It seems that the logic behind the sizing is not working as it should. I also can't reproduce your error with the given information. – Mx. Feb 2 '17 at 12:35
  • I'm looking for the JS function that is responsible of the resizing... – AymKdn Feb 2 '17 at 16:22
  • Just wanted to show, that it works in my environment with no UI customization. Any custom CSS, master page etc in yours? – Rustam Feb 3 '17 at 9:37
  • @Rustam I tried with a non-UI customized Sharepoint, and I have the same issue. However I tried on another computer and it was OK. I looked at the resolution: on my laptop (where the problem appears) I have a resolution of 1536x864 (1920x1080 with the default 125% zoom of Windows 8), and on the desktop computer the resolution is a real 1920x1080. If I go to Sharepoint with my laptop's Chrome and if I change the zoom to 90%, then the ribbon is not squeezed. So yes it's due to size... But it doesn't help: I still need to know which JS code is responsible in order to hack/fix it! – AymKdn Feb 3 '17 at 11:33
  • Isn't issue with the zoom settings in your chrome, when I test it on the out of the box site (Jul2016 CU) it shows ok. When I decrease zoom to 90% I can recreate your issue (but not every time) – Marek Sarad Feb 3 '17 at 11:34
3
+50

The responsiveness of the suitebar is implemented via the cui.js located at /_layouts/15/cui.js.

The handler that is attaching to the resize is added in the CUI.ScalableRoot.prototype.set_$4k_2 function:

set_$4k_2: function(a) {
    if (a === this.$6s_2)
        return a;
    if (a)
        $addHandler(window, "resize", this.$4R_2);
    else
        try {
            $removeHandler(window, "resize", this.$4R_2)
        } catch (b) {}
    this.$6s_2 = a;
    return a
}

You can add breakpoints in the $CO_2 function to validate that. This function should also be the one initiating the responsive resizing.

Example:

//get pagemanager since it's the only reference to the Ribbon object I could find
var pagemanager = SP.Ribbon.PageManager.get_instance();
//get ribbon
var ribbon = pagemanager.get_ribbon();
//disable the responsive function
ribbon.$CO_2 = function(){};
1

So, after many hours of debug, and using the answer from @Mx, I've been able to figure out the problem and find a solution.

There is a 1px difference returned by CUI.Ribbon.prototype.$94_3 causing a call to this.$A_2.scaleDown() in CUI.Ribbon.$Ce_3()... So to fix it I changed the below function that is only called if sp.ribbon.js is loaded. With this method the responsive resizing will work.

SP.SOD.executeOrDelayUntilEventNotified(function() {
  CUI.Ribbon.prototype.$94_3=function() {ULSpEN:;
    if (CUI.ScriptUtility.isNullOrUndefined(this.$9_3)) {
      return 0;
    }
    var diff = this.$f_3.offsetHeight - this.$9_3.get_$3_0().offsetHeight;
    return (diff === -1 ? 0 : diff)
  };
}, "sp.scriptloaded-sp.ribbon.js")
0

Check if your chrome Zoom level is less than normal(100%) . if yes then set it to 100 .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.