Resize RadSplitter to the size of its content

Working with the Telerik RadSplitter control I had the situation where I had dynamic controls in a panel inside a RadSplitter.

If you are using any sort of tree control or expanding panel you will find the RadSplitter is only resized to the size of the contents when the page first loads and if you change the height of the content you get scroll bars. This is quite undesirable if you are using the left panel for some sort of navigation. I searched for a solution and all information from Telerik indicate this is by design and the control doesn't support this type of behaviour.

But it is possible, if you look at the online help you will see they use the splitter control with this exact behaviour. Find a page with a little bit on content and expand the tree menu. You will find the height of the RadSplitter control is increased and no scroll bars appear. So how come it works here?

I inspected the HTML and styles to see what the differences were with my control. I found the height on each RadPane was set to auto.

So here is the basic setup of the RadSplitter, RadPanelBar and RadPanes. 

<telerik:RadSplitter ID="RadSplitter1" runat="server" CssClass="Splitter" Width="970px" 
    BorderSize="0"
    <telerik:RadPane ID="RadPane1" CssClass="NavigationPanel" runat="server" Width="200px" 
        MaxWidth="200"
        <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="200px" CausesValidation="False"
            <Items> 
                <telerik:RadPanelItem runat="server" Text="Show All" Value="showall"
                telerik:RadPanelItem> 
                <telerik:RadPanelItem Text="Messages" runat="server" Expanded="True" Value="messagesummary"
                    <Items> 
                        <telerik:RadPanelItem Text="Item 1" runat="server"
                        telerik:RadPanelItem> 
                        <telerik:RadPanelItem Text="Item 2" runat="server"
                        telerik:RadPanelItem> 
                        <telerik:RadPanelItem Text="Item 3" runat="server"
                        telerik:RadPanelItem> 
                    Items> 
                telerik:RadPanelItem> 
            Items> 
        telerik:RadPanelBar> 
    telerik:RadPane> 
    <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" EnableResize="False" /> 
    <telerik:RadPane ID="RadPane2" CssClass="ContentPanel" runat="server"
        <asp:Panel ID="Panel1" runat="server"
            <asp:PlaceHolder ID="PlaceHolder1" runat="server">asp:PlaceHolder> 
        asp:Panel> 
    telerik:RadPane> 
telerik:RadSplitter> 

The height is set using JavaScript so the easiest way is to override the height using CSS.

.Splitter,.NavigationPanel,.ContentPanel  
    heightauto !important; 

After this CSS addition, you will find the splitter will resize to the height of the panel's content.