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;
}
11 comments:
Nice.
But what if I want to reduce the ribbon bar height.
I guess entering a negative value would work. I will check next time I have the occasion. Might need be additional CSS tweak.
Hey,
Thanks for the article. I actually was having the same issue, but solved it a little bit differently, here's how:
First, I used Google Chrome to find out that the ribbon was either 44px or 135px. I searched for the ribbon's class of "s4-ribbonrow" and found it in init.js. None of this is new to you, since this is where I found the line for RibbonIsMinimized() ? 44 : 135;.
The method that I used next, I cannot take credit for, as I had found a couple months back this technique for "overriding" the default SP javascript functions. I used the technique on this website: http://www.codegain.com/codesnippets/sharepoint/developmentprogramming/how-to-apply-color-coding-sharepoint-list-using-jquery.aspx
So, in my own js file, I used this technique to replace the entire function FixRibbonAndWorkspaceDimensions(). I copied and pasted the entire function from init.debug.js on the SP server, and just changed the one line of code from 44px : 135px to my custom height. It worked great, and now you can set as large or small as you want.
However, the reason why I'm here in the first place is because I'm running into a problem now. Whenever I click on the Site Actions button or the button with the username that allows you to sign in as a different user, the ribbon shifts back up. It's very strange, and I cannot figure out why this is. I was hoping you would be able to shed some light on it, as I would think you ran into the same problem after you changed this height?
Thanks a lot for your time!
Paul
I tried entering negative number which didn't work.
Using CSS, I was trying to do this:
#s4-ribbonrow
{
min-height: 0px !important;
height: 25px !important;
}
When I'm using important, its showing up 25px in collapsed mode.
But its not poping up the expanded/edit mode when I click on Page/Edit.
Oh yeah... It worked now by giving negative number.
Thank you so much.. :)
Oh blimey!
I was hunting high and low thinking the 44px:135px value was "intelligently" calculate from heights specified in the CSS.
Thanks for the post. It worked for me.
This is exactly what I was looking for but I cannot seem to get it working. Where in the master page should I add the script to set the g_wpadderHeight variable?
Hi,
As of where to put the variable definition I would say that the < head > should do.
But modifying the masterpage isn't always the best thing to do. You can also try inserting your JavaScript code using a custom adtion. Jan Tielsens wrote a nice piece about this : http://weblogs.asp.net/jan/archive/2010/03/01/scriptsrc-referencing-javascript-files-with-sharepoint-2010-custom-actions.aspx
Not sure that it will work though.
I needed a ribbon area with a larger height, so I just changed any mention of 135 in init.js to 185. Worked like a charm.
it work perfectly but when i edit a page and then cancel a webpart, the ribbon returns to its original size without the wpadderHeight change.. what can i do?
Post a Comment