Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Splitter / Making RadSplitter occupy part of a page with variable size

Making RadSplitter occupy part of a page with variable size

Article Info

Rating: 3

Article information

Article relates to

 all versions of RadSplitter

Created by

 Tsvetelina, Telerik

Last modified

 April 14, 2008

Last modified by

 Svetlina, Telerik


HOW-TO
Make RadSplitter occupy part of a page with variable size




DESCRIPTION
Let us assume that you have created a page with header and footer and you want to split the entire area between those two elements with a RadSplitter control. In order to attain this, you need to set the Height and Width properties of the RadSplitter to 100%. However, you will encounter that the height of the result page exceeds the height of the browser window.
This KB article describes how to configure RadSplitter to occupy 100% of its container.

SOLUTION
The first step is to configure the splitter to occupy 100% of the page. Details about setting the Height property of a RadSplitter to 100% are available here.

The second step is to "tell" RadSplitter to occupy 100% of its container, not the page. To do this, you need to set the HeightOffset property of the splitter to the sum of the heights of the header and the footer.   

<radspl:RadSplitter HeightOffset="200" id="[Your_Splitter_ID]" runat="server" Height="100%" Width="100%">  

You can take advantage of this technique in any case that you need to force the RadSplitter control to occupy 100% of a part of your page. 

The effect of the HeightOffset property of the RadSplitter is demonstrated in the attached files. You can see the page before the HeightOffset property is set in the Header_Footer_Scroll.jpg file. The Header_Footer_NoScroll.jpg file demonstrates the page after the property is set.





Since this article concerns only setting a single property (HeightOffset) and this property is also available in RadSplitter for ASP.NET AJAX (Prometheus) there are no differences in achieving the described layout.

Files

Comments

  • Fish , Apr 19, 2007

    great staff, thanks :)

  • Shark75 , Jul 13, 2007

    I've been trying for a while now to get this to work with a header and a footer. In your attached picture you have such a scenario. Any chance you could share the source code? I just need a header, content in the middle and footer. They should occupy 100% of the browser so resize with the browser but not go past it's bounds (as seen in the attached Header_Footer_NoScroll.JPG) Everything I try here results in a squished up splitter (about 1cm height on IE and about 6cm on Firefox).

  • Telerik Admin , Jul 31, 2007

    We have attached a simple page, demonstrating the discussed approach.

  • Stephan , Dec 12, 2007

    I tried this. in IE it is ok , but in FF the splitter doesnot expand to the whole page

  • Telerik Admin , Jan 21, 2008

    I suppose the problem you have is caused by the fact that you have not set the Height of all parent nodes of the RadSplitter to 100%. Please refer to this example for information.

  • Robert Gyorodi , May 1, 2008

    Can I set the HeightOffset through javascript? I would need this in a scenario where the header is not a static one and it can modify it's height upon resizing the window.

  • Telerik Admin , Jul 16, 2008

    In order to achieve the desired functionality you can use the RadSplitter's set_heightOffset and repaint methods as shown below:

    var splitter = $find("RadSplitter1");
    splitter.set_heightOffset(50);
    splitter.repaint();

    I also recommend to examine the following link: http://www.telerik.com/community/forums/thread/b311D-mbhbc.aspx

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.