Tracking Down the Elusive Quick Launch Draggable Border in SharePoint 2010
In SharePoint 2010, you’ll sometimes see that the Quick Launch has a draggable right border so that you can resize it, *if* you have the Tree View enabled. That seems sort of useful, eh? But why the heck is it there some of the time and not other times? We wondered just that and decided to get to the bottom of it.
We had a test case because we had two sites, one of which displayed the draggable border, one of which didn’t. We couldn’t figure out what was different between the two sites, though. They both were part of an upgraded MOSS application we were working on.
At first we thought we had some sort of issue with our custom branding, so we created a new site with no branding, and that didn’t give us the draggable border. So we created a new Web Application on a clean VM to remove *all* possible variations. Nope.
In our test VM, we just so happened to have two sites set up to try to figure out another issue we had been having. (Bil Simser [@bsimser] claimed in a tweet that he has an answer on that one, but so far he isn’t talking. Bug him on it for me.) The two sites had been created with the Blank Site template and the Team Site template. We were seeing the draggable border in the Team Site, but not the Blank Site.
We looked at the Site Features. Sure, there were differences, but nothing which seemed like it would be connected to the behavior of the Quick Launch. So we tried just turning Site Features on one by one in the site where we weren’t getting the draggable border.
After a few tries, bingo!
If you enable the Metadata Navigation and Filtering feature, you’ll get the draggable border. Not at all obvious, of course.
This is one of the little, undocumented (at least I can’t find it anywhere) things that activating the Metadata Navigation and Filtering feature gives you. If you think about what capabilities this feature gives you, it makes some sense that this behavior would be a part of it, but not in the context we were chasing down.
Many of the features available in SharePoint have this sort of unexpected effect, so you always need to be careful, mindful even, about activating or deactivating features willy-nilly.
<UPDATE DateTime=”2010-12-05”>
If you’ve read this far, you, like @webdes03, might be interested in what changes in the DOM when this draggable border is there. The difference is fairly clear. Here are two screen snippets form the Developer Tools in IE8. The first is the DOM when the draggable border is present…
…and the second is what the DOM looks like without it.
The GrippyVerticalBarPositionHelper (reminds me of the hippy dippy weatherman) is the difference, along with a little extra styling on the two DIVs below it. Here’s what the GrippyVerticalBarPositionHelper looks like. Obviously there’s some underlying script which makes it work.
<DIV style="POSITION: relative; WIDTH: 0px; HEIGHT: 0px; TOP: 0px; LEFT: 0px" id=GrippyVerticalBarPositionHelper> <DIV style="BACKGROUND-IMAGE: url(/_layouts/images/MDNGrippy.gif); POSITION: absolute; WIDTH: 3px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 250px; HEIGHT: 800px; TOP: 0px; CURSOR: e-resize; LEFT: 153px"> </DIV> </DIV>
</UPDATE>
Hi Marc,
Have you found any way on how to make adjustments to this? We would like to make the quick launch and the metadata navigation area wider, but the resizer (draggable border seems to be stuck.
Any help is much appreciated. :-)
Frank:
How do you mean “stuck”? Do you have any custom branding in place that could be having an effect on the behavior? Custom script?
M.
Hi Mark,
Sorry, bad choice of word :-)
It’s not actually stuck, I can use the draggable border just as intended.
But I have adjusted the width on the quick launch, because many of the keywords from the metadata service structure is fairly long. So I was hoping in doing that, that the draggable border also moved farther to the right, because of the new width of the quick launch area. It doesn’t. It stays put. Hence the word “stuck”. :-)
Any idea on how to fix this? Is it at all supposed to work like this?
Following css should resolve the issue:
body #s4-leftpanel{
width:180px; !important;
float:left;
}
#GrippyVerticalBarPositionHelper > div
{
left:180px !important;
}
.left-nav-bar, .ms-KFMenu
{
width:180px !important;
}
.s4-ca{
margin-left:182px; !important;
}
Hi
Is there a possibility that i have this dragging functionality without activating the “metadata navigation…” feature through custom branding?
Any pointers would be very helpful
Thanks and regards
Shiva
Shiva:
I would suggest adding some script to mirror the functionalioty. There are quite a few posts out there with examples.
M.
What is the underlying script that does the heavy lifting? Where can it be located?
Hi! I’ve got two libraries in wich the “GrippyVerticalBar” is available. By the way, its default size is too small to hold the menu and EVERYTIME we need to resize it manually. Is there a way to make its default size larger? Is the css different for each library where metadata navigation is activated? Thank you!
You should be able to set it’s width either with CSS or JavaScript.
M.
I can’t find what are the class involved to change that, neither the file that contain the style!
You should be able to set the width of the div wit the id=GrippyVerticalBarPositionHelper, as I show in the update on the bottom of the post.
Something like this ought to work:
#GrippyVerticalBarPositionHelper { width:200px; }M.
Hi Marc, thank you for your help. I’ve found a way to achieve this by adding a style tag in my master page file. In the header you can simply add this:
.s4-ca {MARGIN-LEFT: 235px;}
BODY #s4-leftpanel {WIDTH: 235px; FLOAT: left}
If allowed, I would like to link a useful link that helped me (other than your post of course!)
http://erikswenson.blogspot.it/2010/01/sharepoint-2010-base-css-classes.html
Thanks for adding the additional info!
M.
Hi Marc! OMG this post is brilliant! I wonder if you could help me out with something tho – I want to make the height of the box longer – when it expands we’re losing a lot of the menu and I don’t want t0 have to ask my users to manually resize every time. Any idea how I’d do this?
Many thanks in advance ;)
tabykitten:
It sounds like something you could do with a simple bit of CSS. Just give the element a bigger height or min-height.
M.
And how to do the same manipulation (add drop left panel) for SharpePoint 2013?