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.
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>