Splitter/Pane - 100% height of content area with dynamic content height

[Kevin Schneider]

I have a Splitter & 2 Panes as illustrated in the code below.  The user control that contains a tab strip has content that could be of any height.  Each tab will have a different height.

What I don't want is to see a scroll bar for the pane when I change to longer tabs.  I want the pane to grow to accomodate its own content.

I used the example from another post here on the forum that used the OnClientLoaded of the splitter to use javascript to adjust the height (slightly modified since I don't want it to be smaller than 400 ever).

I should also mention that the content inside of these tabs could change since they could house controls that are able to add rows to themselves so the pane has to be able to grow accordingly.

Here is my code:

<script type="text/javascript">

        function onClientLoaded(splitter, args)
        {
            var pane = splitter.getPaneById("<%= paneRight.ClientID %>");
            var parentContent = pane.getContentElement();
            var contentHeight = parentContent.scrollHeight;

            if (contentHeight < 400)
            {
                contentHeight = 400;
            }

            // Vertical orientation
            splitter.set_height(contentHeight);
            pane.set_height(contentHeight);
        }

    </script>

    <Telerik:RadSplitter ID="radSplitter" runat="server" SkinID="Default" Width="100%" OnClientLoaded="onClientLoaded">
        <Telerik:RadPane ID="paneLeft" runat="server" Width="22px">
            <Telerik:RadSlidingZone ID="slidingZone" runat="server">
                <Telerik:RadSlidingPane ID="paneCorporations" runat="server" title="Corporations" Width="250px" EnableDock="False">
                    <UserControl:TreeView ID="treeView" runat="server" />
                </Telerik:RadSlidingPane>
            </Telerik:RadSlidingZone>
        </Telerik:RadPane>
        <Telerik:RadPane ID="paneRight" runat="server" Scrolling="None">
            <div class="innerContent">
                <UserControl:TabStrip ID="tabStrip" runat="server" />
            </div>
        </Telerik:RadPane>
    </Telerik:RadSplitter>

[Svetlina Anati]

Hello Kevin,

I tested your code both under IE and FF and it indeed resizes the RadPane according to its content. The only scrollbar which I was able to see is the browser's scrollbar, not the RadPane's one as you can see from the attached screenshots.

I am also attaching my testing project - please test it on your side. In case it does not cover your setup, modify my project in order to reproduce the problem, open a new support ticket and send it back to me along with a detailed explanation of the desired behavior. I will check it right away.


Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center