RadSplitter height on Master/Content pages

[Paul Ridden]

Hi

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?

Thanks
Russell Mason

[Svetlina Anati]

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
    splitter.set_height(contentHeight);
    pane.set_height(contentHeight);
}

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.




Regards,
Svetlina
the Telerik team

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

[Allen Smothers]

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

[Svetlina Anati]

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:

http://www.google.bg/search?hl=bg&source=hp&q=ajax+scrollbar+position&meta=&rlz=1W1WZPA_en&aq=f&oq=

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


Greetings,
Svetlina
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.