SharePoint 2010 – Resizing the Ribbon bar

Recently I was asked to add some element in the ribbon upper part just before the Site Actions Menu. Thus I needed to increase the height of the upper part of the ribbon to fit our content (blue part in the screenshot above).

Problem

After spending an insane amount of time on what seemed so simple, I managed to get it kinda working. I say “kinda” because no matter what I did I couldn’t get the ribbon to display correctly when it was opened.

After checking this article from the SharePoint team: http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?PageType=4&ListId={72C1C85B-1D2D-4A4A-90DE-CA74A7808184}&pID=426

I understood that it came from a FixRibbonAndWorkspaceDimensions() javascript function from init.js that just kept setting the height at 44px (ribbon collapsed) or 135px (ribbon opened) no matter what my CSS said. The culprit line is:

var baseRibbonHeight=RibbonIsMinimized() ? 44 : 135;

No need to tell you that after hearing Microsoft boast about their compliance with the latest Web Design best practices, I was expecting more than to find hard-coded height values in a JavaScript file…

Solution

Yet everything isn’t lost as the actual ribbonHeight is the aforementioned value plus a padding value

var ribbonHeight=baseRibbonHeight+g_wpadderHeight;

Thus if you want to increase the ribbon height, you just need to set the javascript variable g_wpadderHeight to the value you want to increment. You might do that in your masterpage as such :

<script type="text/javascript">

g_wpadderHeight = 30;

</script>

Something else to note, the WebPart adding part of the ribbon stopped displaying the “Add”, “Cancel” button after resizing the ribbon bar as they were out of the box. I solved this problem with a bit of css :

.ms-wpadder-buttonArea{

padding-bottom:30px;

}