Tree View Navigation & Managed Meta Data Navigation, Missing Vertical Grip in starter.masterpage

Intro

This goes out to those people that want to use the managed meta data navigation / tree view navigation and are using the starter master page or another simplified master page. By default the tree view navigation is hidden in the starter master page so you’ll need to put that back. The other issue that some people may have encountered is that the vertical navigation resizer is nowhere to be found. The following sections will explain the issues and how to restore the navigations horizontal resizing functionality. I am a big proponent of the starter.masterpage. I use it frequently and just recently noticed this when comparing the meta data navigation.

Tree View Navigation & Managed Meta Data Navigation

You can add back in the Tree View Control which is used to show the Tree View Navigation and the Meta Data Navigation. Just add this control back from the hidden zone in the Starter master page. You’ll want to paste it back in the div id=’s4-leftpanel’ somewhere around line 459.

Hidden Control @ Bottom of Starter Master Page -> <SharePoint:DelegateControl runat=”server” ControlId=”TreeViewAndDataSource”></SharePoint:DelegateControl>

Left image displays no tree view navigation on the starter master page. Right image displays tree view navigation on v4.master.

    

Tree View Navigation – Lost Horizontal Expansion (aka GrippyVerticalBarPositionHelper)

Because of the simplified structure of the starter master page you will lose the vertical grip which can be useful in dynamically resizing the width of the left quick launch. You CAN get this back but you need to re-structure your master page.

Vertical Grip as seen on V4.master

 

This vertical grip / horizontal resizer goes away in the starter master page because its missing one of the key div’s which make it possible.

The following div needs to surround the div id=’MSO_ContentDiv’.

<div id=”MSO_ContentTable”>

<div id=”MSO_ContentDiv” runat=”server”> [clipped for brevity] </div>

</div>

Adding this around the ‘MSO_ContentDiv’ on the starter master page and you will get this. (This assumes that the tree view control was previously added)

What you might not immediately notice is that there is a huge left side margin. This is because the structure of the HTML in the starter has been reduced that this is still not going to display correctly. The correct minimal structure would be:

<div id=”s4-workspace”>

    <div id=”s4-bodyContainer”>

        <div id=”s4-mainarea”>

            <div id=”s4-leftpanel”> [clipped for brevity] </div>

            <div id=”MSO_ContentTable”>

                <div id=”MSO_ContentDiv”> [clipped for brevity] </div>

</div>

</div>

</div>    

</div>

As you can see from the markup above, the ‘s4-leftpanel’ and the ‘MSO_ContentTable’ are sibling nodes. So the reason why this does not work in the starter master page is because the ‘s4-leftpanel’ node is actually inside the ‘MSO_ContentDiv’, plus there is no ‘MSO_ContentTable’ which needs to be present in order for the vertical navigation resizer to appear.

Advertisements