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

2 posts, 0 answers
  1. Kevin Schneider
    Kevin Schneider avatar
    48 posts
    Member since:
    Jan 2008

    Posted 03 Jun 2008 Link to this post

    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> 
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Jun 2008 Link to this post

    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
Back to Top