RadSplitter height 100%

[Tad]

k, I am having a terrible time with making the splitter take up 100% of the height (full page).

I can make it work easily without using master pages.  I simply follow the example that you guys have provided and it works wonderfully.  However, if I take the exact same example and apply it to my web app that is using a master page, I cannot get it to work at all.  Has anyone been able to have the splitter take up the full page using a master pages?  If so, can I see an example of how it was done?

Thanks,
Tad

[Svetlina Anati]

Hello Tad,

In order to make RadSplitter occupy 100% of the available space you should include the following style in the MasterPage's head:

<style type=css>
html, body, form
{
   height: 100%;
   margin: 0px;
   padding: 0px;
}
</style>

You should also set the splitter's Width and Height properties to 100%.

Please, also note that if your RadSplitter is placed in another elements, e.g DIV, etc., you should also explicitly set their sizes.

Regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Tad]

I must be missing something really simple here, but I followed your directions and it still does not behave correctly.

Here is my master page:

<%

@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

<

html xmlns="http://www.w3.org/1999/xhtml">

<

head runat="server">

<title>Using Master Page</title>

<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

}

</style>

</

head>

<

body>

<form id="form1" runat="server">

<div class="MasterBlueHeader">

<div class="MasterHeaderText">

<asp:Label ID="lblTitle" runat="server" Text="Database Restore Project"></asp:Label>

<br />

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<asp:Label ID="lblSystemStatus" runat="server" Text="System Status: "></asp:Label>&nbsp;&nbsp;<asp:Label ID="lblSysStatus" runat="server"></asp:Label>

</ContentTemplate>

</asp:UpdatePanel>

<br />

<div style="text-align:right; font-size:8pt">

<asp:Label ID="lblLoggedInAs" runat="server"></asp:Label>

</div>

<div style="text-align:right; font-size:8pt">

<asp:LinkButton ID="lnkButton" Text="Log Out" runat="server"></asp:LinkButton>

</div>

</div>

</div>

<br /><br />

<asp:contentplaceholder id="mainContent" runat="server">

</asp:contentplaceholder>

<br /><br />

<div class="MasterBlueFooter">

</div>

</form>

</

body>

</

html>

Here is my page that holds the radsplitter:

<%

@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/MasterPage.master" CodeBehind="HoldingPageWithMaster.aspx.cs" Inherits="Reports.HoldingPage" %>

<%

@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %>

<%

@ Register Assembly="RadSplitter.Net2" Namespace="Telerik.WebControls" TagPrefix="radspl" %>

<

asp:Content ID="Content1" runat="server" ContentPlaceHolderID="mainContent">

<radspl:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Height="100%" Width="100%">

<radspl:RadPane id="contentPane" Scrolling="Both" ContentUrl="Reports/UserReport.aspx" runat="server"></radspl:RadPane>

</radspl:RadSplitter>

 

</asp:Content>



Now if I take this same content and put it outside of a master page; it works fine and as I would expect.  But, as soon as I throw the radsplitter into a page that's using a master page, it does not take up the 100% height on the page.

[Tad]

Any thoughts from the Telerik team?

[Svetlina Anati]

Hi Tad,

I tested the provided code both under IE7 and FF3 but I was not able to reproduce the problem - the splitter occupies 100% of the available space.

Would you please prepare a sample, fully runnable reproduction demo project which contains only your splitter , open a new support ticket and send it to me along with information about the browser under which the problem occurs? Once I receive it, I will do my best to help.

Kind regards,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Hong]

I have a horizontal RadSplitter in my project, it worked good without Height="100%". However, when I set RadSplitter's Height to 100%, then the splitbar did not work correctly (it could not expand after it was collapsed.)  Here are my sample code, please let me know what is wrong.
 

<%

@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>

 

 

<%

 

 

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

 

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

 

 <

 

 

 

 

html xmlns="http://www.w3.org/1999/xhtml">

 

 

 <

 

 

 

 

head runat="server">

 

 

 <

 

 

 

title>Testled Page</title>

 

 

 

 

 

 

<style type="css">

 

 

 

 

 

 

html, body, form

 

 

 {

 

 

 

 

height: 100%;

 

 

m

 

 

 

argin: 0px;

 

 

 

 

 

 

padding: 0px;

 

 

}

 

 

 

 

</style>

 

 

 

</head>

 

 

 <

 

 

 

 

body>

 

 

 

 

 

 

<form id="form1" runat="server">

 

 

 

 

 

 

<asp:ScriptManager ID="ScriptManager1" runat="server">

 

 

 

 

 

 

</asp:ScriptManager>

 

 

 

 

 

 

<telerik:RadSplitter ID = "s1" runat = "server" Orientation = "Horizontal" Height = "100%">

 

 

 

 

 

 

<telerik:RadPane ID = "p1" runat = "server" Height = "100%">

 

 

 

 

 

 

NAME:

 

 

 

 

<asp:Label ID="NAMELabel" runat="server" Text="TESTER"></asp:Label><br />

 

 

 

 

 

</telerik:RadPane>

 

 

 

 

 

 

<telerik:RadSplitBar ID = "b1" runat = "server" CollapseMode = "Both" />

 

 

 

 

 

 

<telerik:RadPane ID = "P2" runat = "server" Height = "100%">

 

 

 

 

 

 

DESCRIPTION:

 

 

 

 

<asp:TextBox ID="DESCRIPTIONTextBox" runat="server" Text="Test Splitter."></asp:TextBox><br />

 

 

 

 

 

</telerik:RadPane>

 

 

 

 

 

 

</telerik:RadSplitter>

 

 

 

 

 

 

</form>

 

 

 </

 

 

 

 

body>

 

 

 </

 

 

 

 

html>

 

 

 

 

 

 

 

[Svetlina Anati]

Hello Hong,

I built up a test page based on the provided code and I was able to reproduce the problem. In order to get the desired behavior, please go through the following steps:

1. Set

    

   <style type="text/css">  instead of

    

    

   <style type="css">  in order to make the browsers interpret the style correctly.
   

    

    

    

2. You cannot set the height of each RadPane to be 100% of the splitter since it is horizontal - if one of the panes becomes 100%, there will be no space for the other one. You can set height either for both of them explicitly (but the sum should be exactly the same as the whole splitter height), or set height only for one of them - in this manner the other pane will automatically calculate its correct size. You can also leave both the panes without size - they will become exactly 50% of the splitter each.

I hope that my explanations are helpful and after I applied the above explained settings to the test page everything started working as expected. for your convenience I attached it to the thread.

All the best,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Hong]

Thank you so much, now I can let horizontal RadSplitter work in the regular web page. However, when I try to use the same horizontal RadSplitter in a user control(.ascx file) which is loaded in a DotNetNuke page, the RadSplitter did not work there.  Is there anything I can do to let it work in DotNetNuke page?

[Svetlina Anati]

Hello Hong,

The only reason for the problem I can assume is that there are some parent elements of the splitter which do not have their height explicitly set. Please, make sure that all the parent elements of the splitter, e.g DIV, TD, etc have the height set. In case the problem persists, it will be helpful if you can provide a live url where we can observe the issue. 

Best wishes,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Hong]

Thanks for your help. However, the RadSplitter still can not work correctly after I set height to 100% for all parent items. I appreciate if you could have a look at the DNN module. Please go to: 
http://dev.barbourconsulting.com/dnn/Default.aspx
username: userHR 
password: userHR123
After login, click Human Resources tab, then select any employee by clicking "Edit" link button, you will see how my RadSplitter works. Any suggestion is greatly appreciated.

      

[Svetlina Anati]

Hello Hong,

I examined the provided url but I got a server error - please see the attached screenshot. Let me know when you fix the problem or best - open a new support ticket and send me a sample reproduction demo along with detailed explanations of the problem and reproduction steps and I will do my best to help.

Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Carlos Amigo]

I've RadControls for ASP.NET AJAX Q2 2009. I'm building a user control. This is my code:

 

<%

@ Control Language="C#" AutoEventWireup="true" CodeFile="Chart.ascx.cs" Inherits="Controls_Chart" %>

 

 

 <%

@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

 

 

<

 

asp:Panel ID="Panel1" runat="server" Height="300px">

 

 

 

       <telerik:RadSplitter ID="RadSplitter1" Width="600px" Height="300px" runat="server" Orientation="Vertical" >

 

        

        <telerik:RadPane ID="RadPane1" runat="server" Width="300">Toolbar</telerik:RadPane>

 

 

 

               <telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableAjaxSkinRendering="true" CollapseMode="Forward" CollapseExpandPaneText="Business" />

 

 

 

                <telerik:RadPane ID="RadPane2" runat="server">Chart</telerik:RadPane>

 

 

        </telerik:RadSplitter>

 

</

 

asp:Panel>

When I run this, the splitter exceed the height of panel. If I change the panel with <div style="height:300px;">, this take 300px of height but the splitter overwrite and exceed the div, (splitter always has about 600 or 700px). 

What's wrong?
TIA
Charly

 

 

 

 

 

[Svetlina Anati]

Hello Carlos,

The only thing I can think of which might be affecting your splitter to get bigger than specified is that you have put your user control in another RadPane on the resultant page. If so, the splitter will automatically occupy 100% of the parent pane instead of taking the size you have set. In order to get the desired result you should set ResizeWithParentPane="false" for the splitter which is in the user control. You can find more information about the property is available below:

http://demos.telerik.com/aspnet-ajax/splitter/examples/nestedsplitters/defaultcs.aspx


Sincerely yours,
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.

[Carlos Amigo]

Great! That was the problem. Now I can resize the splitter.

Thank you.

Charly

[Chris Moore]

You know, this thing with the height of the RadSplitter is ridiculous. I was beating my head agains the wall trying to figure out why the splitter was only taking up a small amount of height on my page. The only way I've been able to increase the height beyond the default is to use absolute units. Finally, thought I, I'll search google. When you type in "radsplitter" the FIRST suggestion is "radsplitter HEIGHT". Apparrently, many people are having trouble with this - and this issue, judging from the time the post was first made - is a long-standing one. I've followed all of the suggestions here and yet, STILL, the splitter is not occupying all of the space. I've verified, in fact that the splitter is the culprit. If I take the splitter out and fill in with text, the entire page is used. As soon as I put the splitter in I'm defaulted to 500 pixels or so in height. C'mon guys, you make some great controls. Fix this silly issue. Right now, I have no idea how to make the thing take up all the height. By DEFAULT it should take up all the height, not some X arbirtrary number of pixels !!!  EG,


 

<%

 

-- ALWAYS Fixed height, around 500 pixels

 

If I get rid of the splitter and fill in the content with text, the entire page is used

--

 

 

%> <telerik:RadSplitter ID="radSplitter" runat="server" Width="100%" Height="100%">

 

 

 

 

<telerik:RadPane ID="radLeftPane" runat="server" >

 

 

 

<asp:ContentPlaceHolder runat="server" ID="LeftColumn">

 

 

 

</asp:ContentPlaceHolder>

 

 

 

</telerik:RadPane>

 

 

 

<telerik:RadSplitBar ID="radLeftPaneSplitBar" runat="server" />

 

 

 

<telerik:RadPane ID="radMiddlePane" runat="server">

 

 

 

<asp:ContentPlaceHolder runat="server" ID="MiddleColumn">

 

 

 

</asp:ContentPlaceHolder>

 

 

 

</telerik:RadPane>

 

 

 

 

<telerik:RadSplitBar ID="radRightPaneSplitBar" runat="server" />

 

 

 

<telerik:RadPane ID="radRightPane" runat="server">

 

 

 

<asp:ContentPlaceHolder runat="server" ID="RightColumn">

 

 

 

</asp:ContentPlaceHolder>

 

 

 

</telerik:RadPane>

 

 

 

 

</telerik:RadSplitter>

 

[Tsvetie]

Hi Chris Moore,
The problem that you describe is not related to RadSplitter. Basically, in case you set the height of an HTML element in percentages, you must make sure that all its parent elements have a height style applied. Otherwise, you break the following rule:

If a web page element has its height defined in percent, its parent element must have a height style as well. The rule applies recursively.

You can read about this rule on the W3 site (http://www.w3.org/TR/CSS21/visudet.html#the-height-property):

quote:
"<percentage>
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. "

You can refer to this online article (http://demos.telerik.com/aspnet-ajax/Splitter/Examples/ResizeWithWindow/DefaultCS.aspx) for information as well.

You can verify that the problem is not in our control, in case you replace the splitter with a simple DIV element, with "height:100%" style setting.

Kind regards,
Tsvetie
the Telerik team

[treesara]

In case it helps those in a similar situation, I was alble to finally fix this by defining an inline css style for the <div> tag which encloses the ContentPlaceHolder.  Abolute postioning was used in our case since we have defined header and footer areas.

Another thing to point out is that this issue came forward as a result of IE8 (non compatibility mode).  The link below shows a similar solution as mentioned above.

http://blogs.msdn.com/b/tolong/archive/2008/02/05/resize-the-contentplaceholder-in-the-master-page.aspx

hth,
Panit

[Rizwan]

Hi
  I am using latest telerik 2010.2.826.35. I have a scenario where a radsplitter is placed in another radsplitter. Before upgrading to SP1 . it was working fine but after upgrading it has started displaying horizontal scrollbars in IE-8 Native mode only. All others IE7, IE8 compatibility mode and Firefox are working fine.

Is there any known issue in IE 8 Native or any patch which could help in fixing the horizontal scrollbar ?

Best Regards
Rizwan Bashir

[Svetlina Anati]

Hi Rizwan,

 When you nest a RadSplitter directly in a RadPane you should always set Scrolling="None" for the parent pane - if scrollbars are needed they will be generated by the nested splitter's panes.

Please, set the property and let us know whether this resolved the problem.

Kind regards,
Svetlina
the Telerik team

[Rizwan]

Hi
   Yes its already same way as you suggested but still we have horizontal scrollbars.

any other idea's ?

Thanks

[Dobromir]

Hi Rizwan,

To be able to provide any further assistance we will need reliable steps to reproduce the problem on our side. Could you please open a support ticket and provide a sample runnable project and / or a live URL reproducing the problem so we can investigate it further?

Sincerely yours,
Dobromir
the Telerik team

[Andrew]

I'm trying to the the control to be 100% of my page, without any luck.  I've noticed that when it renders the height is set to 400px.

My markup has:
<telerik:RadSplitter ID="rdSplitter" runat="server" Height="100%" Width="100%" ResizeWithBrowserWindow="true" ResizeMode="Proportional" ResizeWithParentPane="true">

But the HTML that is rendered is:

<div id="ctl00_plcMain_rdSplitter" style="width: 1912px; height: 400px;" control="[object Object]">

[Slav]

Hello Andrew,

In order to achieve the desired effect you should ensure that the RadSplitter is not limited by the layout of your page.  Please check the online demo Splitter / Resize with Window for an example of the setup that you want to achieve.

Kind regards,
Slav
the Telerik team

[Jeremy]

grrrr none of these solutions worked for me in all of ie7/ie8/ie9/chrome - my client base.
The below DOES work, but seems incredibly hacky. Why is the Splitter being wrapped in a div called RadSplitter1Panel? Why does this div have no height assigned? Why is the table generated being assigned a height of 1px? Why is the RadSplitter being assigned an inline height of 400px? <-- seems some kind of default as Andrew also mentioned it.

html,body,form {
   margin: 0;
   padding: 0;
   height: 100%;
   overflow: hidden;
}

div[id*="RadSplitter1Panel"], div[id*="RadSplitter1Panel"] > div, div[id*="RadSplitter1Panel"] > div > table{
   height: 100% !important;
}

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%">
   <telerik:RadPane ID="Pane1" runat="server" Height="100%" Scrolling="None">
      left pane
   </telerik:RadPane>
   <telerik:RadSplitBar ID="RadSplitBarFilter" runat="server" CollapseMode="Backward" />
   <telerik:RadPane ID="Pane2" runat="server" Width="420px" Height="100%" Scrolling="None">
      right pane
   </telerik:RadPane>
</telerik:RadSplitter>

[Andrew]

If it helps i finally got it working. My issue was with a table in my master page.  No matter what height I set in the table the control wouldn't go to 100%, always 400px.  Once I removed the table it started to work.

[John]

I have a related question. We are using a RadSplitter with a vertically oriented split bar and everything is fine. I am applying the autoheight style to RadPane #2 (on the right side with the vertically/horizontally growing content) and everything is fine. the width of the RadSplitter is 100% of the page width.

The rightmost RadPane is set to allow X scrolling (horizontal) and this works fine.

However, if the horizontal content within the rightmost pane is wider than the width of the pane, the pane begins to grow vertically uncontrollably and grows about 20 pixels every second until I drag the splitbar back to the left. If the horizontal width is less than that of the pane this behavior is not seen.

Has anyone seen this behavior and what can I do to resolve it?

[Vessy]

Hi John,

Could you elaborate more on what exactly do you mean with "I am applying the autoheight style to RadPane #2"? I assume that you are setting a CSS property with height: auto !important? If so could you please try removing this class and see if the problem still occurs.

Using such approach to provide automatically resize to the splitter according its content is highly not recommended. Instead you can use the approach provided in the following KB article:
Initially Resize the RadSplitter according to its content

If this is not the case, could you please provide a sample project reproducing the issue so we can examine it further?

All the best,
Vesi
the Telerik team

[Michael]

Like SO many others, I'm having the same issues here and now I also have this inline style height/width of 400px and I KNOW it isn't coming from ANY of my code or layout issues.

UPDATE: I've ditched this control for the Kendo Splitter which is easier to use and less buggy.

[Vessy]

Hello Michael,

The 400px is the default height of the Splitter, and if it is displayed with such height the reason most probably is that there is a parent, which size is not configured. When you want to configure a RadSplitter in percentages, you have to make sure that all of its parents also have set size (up to a parent with a fixed size).

If you decide to use the Splitter for ASP.NET AJAX, feel free to provide us with the exact markup, causing the undesired layout and we will do our best to narrow you down on how to configure the control properly.

Regards,
Veselina Raykova
Telerik

[Steve]

Hi Telerik

As you/Michael rightly point out, why is the default height 400px? I note you have some javascript to correct this to 100% width/height on page load but on heavy HTML pages there is a nasty delay (esp. in IE), which for me is a deal breaker. If this must be done why isn't the splitter content hidden until it has been resized??

I've considered the messy hack of doing a find/replace on "400px" to "100%" the HTML as it is written during the Render method, but not looked into this as yet.

I've spent masses of time on this only to realise it's not worth the trouble for me and am now looking for alternatives.

Sorry!

[Vessy]

Hello Steve,

The Splitter (and all RadControls as a whole) is made of HTML and as such they obey some rules which are true in general for the technology itself. As every HTML element, in order to calculate correct size in percentages, the Splitter should have only parents with set size (up to a parent with a fixed height). This is why the control has some initially set fixed height (the mentioned 400px), in order to render itself in case its parent height is not properly configured.

Since we cannot change this behavior for the splitter, the only thing left we could do in this case is to iterate through all the parents and set their height explicitly. However this is not a good solution due to many facts, e.g the following ones:

1) It is not a good practice to silently change the rest of the page
2) Any sizes which were set explicitly by the developer will break
3) There are scenarios in which setting 100% height for the parent is wrong, depending on the scenario. You can have splitter set to 100% but its parent can dynamically change size.
4) Iterating through all the parents in the hierarchy will cause performance slow, while simply setting a CSS to the right elements is much better.

Having in mind the above, we think that it is much better to provide resources on how to configure the layout of the Splitter. You can find this described in details in our online demo below:
Resize with Window

I hope that my reply is detailed enough, in case you have additional comments or some suggestions for a better solution, we will be glad to hear it.

Kind regards,
Veselina Raykova
Telerik

[Steve]

Veselina  - thank you for your response.

On another inspection of the details on the link you provided, a small detail at the bottom about VisibleOnInit = False has helped me avoid the issue of the appearance of the Splitter (prior to resizing) looking very unsightly on the page for a second or so (on large HTML documents).