This is a migrated thread and some comments may be shown as answers.

Height 100% in Q2 2009

17 Answers 240 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
ABC
Top achievements
Rank 1
ABC asked on 13 Jul 2009, 02:12 AM
When i update Q1 2009 to Q2 2009 so RadPane_MainRight with height 100% incorrect. RadPane_MainRight appear scroll
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
    <title></title
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
 <style type="text/css">   
    html, body, form   
    {   
      height: 100%;   
      padding: 0px;   
      margin: 0px;   
    }   
    </style>  
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        <Scripts> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        </Scripts> 
    </telerik:RadScriptManager> 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    </telerik:RadAjaxManager> 
    <div> 
<telerik:RadSplitter id="RadSplitter1" runat="server" Width="100%" Skin="Vista" LiveResize="true" SplitBarsSize="4px" EnableEmbeddedBaseStylesheet="true" ResizeMode="EndPane"
    <!-- Left web --> 
    <telerik:RadPane id="RadPane_MainLeft" runat="server" width="180" MinWidth="170" MaxWidth="300" Scrolling="None">         
      Menu Left 
    </telerik:RadPane> 
    <telerik:RadSplitBar id="RadSplitbar1" runat="server" collapsemode="Forward"  ></telerik:RadSplitBar> 
    <!-- Right web --> 
    <telerik:RadPane id="RadPane_MainRight" runat="server" >         
        aaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaa<br /> 
        aaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa           
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        <br /> 
</telerik:RadPane></telerik:RadSplitter> 
    </div> 
    </form> 
</body> 
</html> 
How to fix this problem?
I dont want appear scroll in RadPane_MainRight
Sorry my bad English
Thanks


17 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 13 Jul 2009, 08:54 AM
Hello khongminh9,
I do not see a Height=100% setting in your RadSplitter definition. In order to have the RadSplitter become 100% of the page, you have to:
  1. Set Height=100% to the RadSplitter:
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%"  
        Height="100%" Skin="Vista" LiveResize="true" 
        SplitBarsSize="4px" EnableEmbeddedBaseStylesheet="true" ResizeMode="EndPane"
  2. Set height to the DIV element that wraps the RadSplitter:
    <div style="height:100%;"
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%"  
            Height="100%" Skin="Vista" LiveResize="true" 
All the best,
Tsvetie
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.
0
Diiimo
Top achievements
Rank 1
answered on 13 Jul 2009, 11:15 AM
I have the same problem. In the sample before, i have set the height to 100% but without any success.
0
Frank
Top achievements
Rank 1
answered on 15 Jul 2009, 07:11 AM
Hi,

I have the same problem. Setting high of wrapping div Tag does not solve the problem.
Even if i follow the solution described in documentation (setting height of html, body and form to 100%) it does not work.
In Q1 2009 it worked fine.

Best regards
Frank
0
Tsvetie
Telerik team
answered on 16 Jul 2009, 09:02 AM
Hello Frank,
In case you would like the RadSplitter control to become 100% of your page, you need to set "height:100%" to all its parent elements - HTML, BODY, FORM, etc. This is not something specific to the splitter, in case you replace the splitter with a simple DIV element with "height:100%", you will get the same result. In case you do this and still have problems with the height of the RadSplitter, please send me the code of your page and I will do my best to help.

Timo, I have attached my test page with the suggested changes - it works as expected on my side. In case this page does not help you fix the problem, please send me the code of your page. Once I get it, I will find what is causing the problem and let you know.


Kind regards,
Tsvetie
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.
0
Scott R
Top achievements
Rank 1
answered on 22 Jul 2009, 04:43 PM
I thought the problem was with the RadGrid, but since other people are having problem with the splitter maybe that is the real culprit. I posted a short sample in the RadGrid forum that demonstrates the problem. The height is correct with the Q1 2009 controls but is not correct with the Q2 2009 controls.

The sample code is here:
http://www.telerik.com/community/forums/aspnet-ajax/grid/problem-with-grid-height-in-q2-2-9-control.aspx
0
Sean McConnell
Top achievements
Rank 1
answered on 24 Jul 2009, 05:09 PM
I have exactly the same problem with Q2 2009 where I set 100% and the splitter is actually rendered with height:1px in the style. This does NOT occur in Q1 2009.

Once the page is rendered I can set 100% using Firebug in Firefox and it fixes it.

Using a CSS height:100%!important may fix this possibly?
0
Svetlina Anati
Telerik team
answered on 28 Jul 2009, 01:17 PM
Hello guys,

By default the RadSplitter should work corrcetly when it is configured in percentages only when all teh parent elements' heights are explicitly set. That is why a setup which looked as it was working OK with a previous version might not work with a later one but this is because even if looked as correct it was not correct and now it is working correctly due to bugfixes.

Scott, I tried to examine teh link you provided but unfortunately there was not such a thread existing. I also searched in our internal system but again I was not able to find it,. What I can assume is that either the thread was deleted by some reason or you have made a mistake in the url. Please, try to open the thread and in case the url is correct, resend it or in case it is not - share your code or provide a live url where I can examine the setup and help.

Randall, I believe that the problem comes from the fact that there is some parent element with no explicit height set. Sometimes it looks like all teh parents' heights are set but there are cases when no visible elements actually wrap teh splitter - e.g when you have ajaxified it with a RadAjaxManager, when you have a ContentPlaceHolder, etc. That is why what I can suggest is to examine teh parent elements through the IEDevToolBar or FireBug tools and find teh particular element with no explicit size and set the desired size. In case you need furtehr assistance I will need to examin eyour code or a live url. 

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.
0
Scott R
Top achievements
Rank 1
answered on 04 Aug 2009, 02:42 PM
Hi Svetlina,

Let me try the link again: Problem with grid height in Q2 2009 control

The answer given in the other thread was this:

Hello Scott,

Unfortunately, there is an issue with RadSplitters with Horizontal Orientation in the Q2 2009 release, which prevents some controls, including RadGrid, from adjusting their layout properly on initial load. Please use our latest internal build, which has this problem fixed. Sorry for the inconvenience.

http://www.telerik.com/account/downloads/internal-builds.aspx

Regards,
Dimo
the Telerik team


0
Svetlina Anati
Telerik team
answered on 07 Aug 2009, 12:31 PM
Hello Scott R,

I examined the code and I noticed that you have wrapped the splitter in a DIV element without explicit height set and when you have the RadSplitter configured in percentages you should set all its parent elements height explcitly. This being said, please set its height as shown below:

  <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        <div style="height:100%">  
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Width="100%" 
                Height="100%" BorderSize="0">  
                <telerik:RadPane ID="Toolbar" runat="server">  
                ToolBar Pane 

I prepared and attached a sample demo based on your code and tested it with Q2 2009 version of RadControls under IE7, IE8 and FF3 and I think that it works as you require. Please examien teh demo and let me know if this is what you need.

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.
0
ABC
Top achievements
Rank 1
answered on 14 Sep 2009, 06:59 AM
I still have problem with RadSplitter Height 100% when i add Header and Footer
Image:
http://upanh.com/uploads/14-Sep-2009/bej1w7ci0dtra13a64j.png

Code:
<%@ Page Language="C#" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
<head id="Head1" runat="server"
    <title></title
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> 
    <style type="text/css"
        html, body, form 
        { 
            height: 100%; 
            padding: 0px; 
            margin: 0px; 
        } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
        <Scripts> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        </Scripts> 
    </telerik:RadScriptManager> 
<!-- Header -->     
<div> 
<img alt="" src="/images/Header_Logo.jpg" /> 
</div> 
     
<div style="height:100%;">  
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" Skin="Vista" LiveResize="true" 
        SplitBarsSize="4px" EnableEmbeddedBaseStylesheet="true" ResizeMode="EndPane"
        <!-- Left web --> 
        <telerik:RadPane ID="RadPane_MainLeft" runat="server" Width="180" MinWidth="170" MaxWidth="300" Scrolling="None"
            Menu Left 
        </telerik:RadPane> 
        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar> 
        <!-- Right web --> 
        <telerik:RadPane ID="RadPane_MainRight" runat="server">  
            aaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaa<br /> 
            aaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaa<br />             
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
            <br /> 
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
        </telerik:RadPane> 
    </telerik:RadSplitter>         
</div> 
<!-- Footer -->     
<div> 
<img alt="" src="/images/Footer_Logo.jpg" /> 
</div>      
    
    </form> 
</body> 
</html> 
 



0
Svetlina Anati
Telerik team
answered on 14 Sep 2009, 08:50 AM
Hello khongminh9,

The behavior you describe is the expected one in this configuration. This is so because the splitter is configured to occupy 100% of the page and when you add a header and a footer which are outside the splitter, their height plus the already 100% high splitter exceed the height of the viewport and a scrollbar is generated. What I can suggest is to use the splitter's HeightOffset property and set it to the sum of the heights of the header and the footer. For example, if the header is 100px high and the footer is 100px high, you should set HeightOffset="200" for the splitter (keep all the current configuration as well). this will force the splitter to occupy exactly 100% of the screen substracted with the header and the footer and you will automatically get the desired layout for all resolutions without the need to write javascript code which you should do if you do not use the splitter.

I hope that my suggestion is helpful, let me know how it goes.



Kind regards,
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.
0
ABC
Top achievements
Rank 1
answered on 15 Sep 2009, 01:38 AM
Still have scrollbar when use the splitter's HeightOffset property
image:
http://upanh.com/uploads/15-Sep-2009/r6lnt4ox5b6lv3f0u5w.png

Code:
<%@ Page Language="C#" %>  
  
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <title></title>  
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />  
    <style type="text/css">  
        html, body, form  
        {  
            height: 100%;  
            padding: 0px;  
            margin: 0px;  
        }  
    </style>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        <Scripts>  
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />  
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />  
        </Scripts>  
    </telerik:RadScriptManager>  
<!-- Header -->      
<div>  
Header <br /> 
Header <br /> 
Header <br /> 
Header <br /> 
</div>  
      
<div style="height:100%;">   
    <telerik:RadSplitter ID="RadSplitter1" runat="server" HeightOffset="50" Height="100%" Width="100%" Skin="Vista" LiveResize="true"  
        SplitBarsSize="4px" EnableEmbeddedBaseStylesheet="true" ResizeMode="EndPane">  
        <!-- Left web -->  
        <telerik:RadPane ID="RadPane_MainLeft" runat="server" Width="180" MinWidth="170" MaxWidth="300" Scrolling="None">  
            Menu Left  
        </telerik:RadPane>  
        <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar>  
        <!-- Right web -->  
        <telerik:RadPane ID="RadPane_MainRight" runat="server">   
            aaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaa<br />  
            aaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaa<br />              
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            <br />  
            aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
        </telerik:RadPane>  
    </telerik:RadSplitter>          
</div>  
<!-- Footer -->      
<div>  
Footer <br /> 
Footer <br /> 
Footer <br /> 
</div>       
     
    </form>  
</body>  
</html>  
  

i use Telerik version 2009_2_826
0
Svetlina Anati
Telerik team
answered on 17 Sep 2009, 09:31 AM
Hi khongminh9,

I examined your code and I notived that the configuration you have used is not the one I suggested - probably I did not explain it clear enough and it will be easier to demonstrate it through code. In order to achieve what you want, please use the following code:


<%@ Page Language="C#" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <title></title>  
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> 
    <style type="text/css">     
        html, body, form     
        {     
            height: 100%;     
            padding: 0px;     
            margin: 0px;     
        }     
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
            <Scripts> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
        <!-- Header --> 
        <div> 
            Header  
            <br /> 
            Header  
            <br /> 
            Header  
            <br /> 
            Header  
            <br /> 
        </div> 
        <telerik:RadSplitter ID="RadSplitter1" runat="server" HeightOffset="140" Height="100%" 
            Width="100%" Skin="Vista" LiveResize="true" SplitBarsSize="4px" EnableEmbeddedBaseStylesheet="true" 
            ResizeMode="EndPane">  
            <!-- Left web --> 
            <telerik:RadPane ID="RadPane_MainLeft" runat="server" Width="180" MinWidth="170" 
                MaxWidth="300" Scrolling="None">  
                Menu Left  
            </telerik:RadPane> 
            <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"></telerik:RadSplitBar> 
            <!-- Right web --> 
            <telerik:RadPane ID="RadPane_MainRight" runat="server">  
                aaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaa<br /> 
                aaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaa<br /> 
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                <br /> 
                aaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
            </telerik:RadPane> 
        </telerik:RadSplitter> 
        <!-- Footer --> 
        <div> 
            Footer  
            <br /> 
            Footer  
            <br /> 
            Footer  
            <br /> 
        </div> 
    </form> 
</body> 
</html> 
 

For your convenience I attached the modified demo page.


Best wishes,
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.
0
ABC
Top achievements
Rank 1
answered on 18 Sep 2009, 02:01 AM
HI Svetlin
Your modified code still display wrong
you can see Image when i use your code on browser FireFox 3.5.3 (Telerik version 2009_2_826):
http://upanh.com/uploads/18-Sep-2009/ult9zg0unsqeffh0cgue.png

My intention: only have scrollbar of browser, dont display scrollbar of RadSplitter
Thanks
0
Svetlina Anati
Telerik team
answered on 23 Sep 2009, 03:34 PM
Hi khongminh9,

If you want to have the browser scrollbar you should calculate and set the splitter's height to be enough to fit the content. You can find a very similar KB article on how to do this below:

http://www.telerik.com/support/kb/aspnet-ajax/splitter/initially-resize-the-radsplitter-according-to-its-content.aspx

Best wishes,
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.
0
Noah
Top achievements
Rank 2
answered on 29 Sep 2009, 05:44 PM
Hi Khongming9,

Each RadPane has a Scrolling property with these options Both, None, X, Y.  This controls which RadSplitter scrollbars are displayed as long as your page heights are set up correctly.

Thanks
-Noah



0
Axel
Top achievements
Rank 2
answered on 15 Oct 2010, 07:02 PM
Hi

I found <html style="height:100%;"> to be a vital part to get height to 100% i.e. the <html> is the absolute root element in the page.

reg.
Axel
Tags
Splitter
Asked by
ABC
Top achievements
Rank 1
Answers by
Tsvetie
Telerik team
Diiimo
Top achievements
Rank 1
Frank
Top achievements
Rank 1
Scott R
Top achievements
Rank 1
Sean McConnell
Top achievements
Rank 1
Svetlina Anati
Telerik team
ABC
Top achievements
Rank 1
Noah
Top achievements
Rank 2
Axel
Top achievements
Rank 2
Share this question
or