RadSplitter height on Master/Content pages

4 posts, 0 answers
  1. Paul Ridden
    Paul Ridden avatar
    36 posts
    Member since:
    Mar 2007

    Posted 30 May 2008 Link to this post


    I have a MasterPage with a RadSplitter and a ContentPlaceHolder in the right hand pane. When I create a content page with a large amount of content I get a vertical scroll bar against the right hand pane (it seems that the spliiter has a height css value set to 400px). I would like the RadSplitter height to be dictated by the content on the content page so that I dont get a scroll bar, i.e. I want the scroll bar to be naturally provided by the browser when needed not the splitter. Each content page has different amount of content so I dont know a specific value to set the height to (and this would change when the layout changes when the browser is resized anyway).

    Is this possible?

    Russell Mason
  2. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 03 Jun 2008 Link to this post

    Hi Paul,

    I suggest to use the RadSplitter's client-side API in order to achieve the desired result.

    I would recommend that you use the OnClientLoaded handler of the RadSplitter object to calculate the Height of the content of the RadPane and set that value as Height of the RadPane. Have a look at the following code fragment:

       function OnClientLoadedHandler(splitter, args)     
        var pane = splitter.getPaneById("<%= RadPane1.ClientID %>");           
        var parentContent = pane.getContentElement();           
        var contentHeight = parentContent.scrollHeight;           
        // Horizontal orientation           
      //  splitter.set_height(splitter.get_height() - pane.get_height() + contentHeight);           
        // Vertical orientation           

    For your convenience I am attaching a sample project. Please, note that if you want to make RadSplitter occupy different area than the default one you should uncomment the style in the head section and set the Width and Height properties.

    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Allen Smothers
    Allen Smothers avatar
    40 posts
    Member since:
    Nov 2006

    Posted 18 Dec 2009 Link to this post

    I have the exact same architecture as Paul. And the client side API works very well to resize the splitter. However, on some of the content pages we are manipulating the HTML client-side using AJAX to avoid post backs. Some of these changes alter the size of the content area and necessitate the resizing of the splitter. Calling set_height() always resets the scroll position to the top of page. Is there any way to prevent this behavior?

    Thank you in advance for your help,
    Allen Smothers
  4. Svetlina Anati
    Svetlina Anati avatar
    2795 posts

    Posted 19 Dec 2009 Link to this post

    Hello Allen,

    In general, the scrollbar position is lost after an AJAX request and thus I assume that this is teh reason for the issue and not the height of the splitter. There are some online resources which explain how to keep the scroll position after AJAX request - you can use the following search as a start point:


    Another option is to use RadAjaxPanel which by default maintains the scroll position.

    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top