Height 100% in Q2 2009

18 posts, 0 answers
  1. ABC
    ABC avatar
    7 posts
    Member since:
    Jul 2008

    Posted 12 Jul 2009 Link to this post

    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


  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 13 Jul 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Diiimo
    Diiimo avatar
    10 posts
    Member since:
    Jan 2009

    Posted 13 Jul 2009 Link to this post

    I have the same problem. In the sample before, i have set the height to 100% but without any success.
  5. Frank
    Frank avatar
    13 posts
    Member since:
    May 2006

    Posted 15 Jul 2009 Link to this post

    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
  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 16 Jul 2009 Link to this post

    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.
  7. Scott R
    Scott R avatar
    63 posts
    Member since:
    Jun 2008

    Posted 22 Jul 2009 Link to this post

    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
  8. Sean McConnell
    Sean McConnell avatar
    38 posts
    Member since:
    Aug 2007

    Posted 24 Jul 2009 Link to this post

    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?
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 28 Jul 2009 Link to this post

    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.
  10. Scott R
    Scott R avatar
    63 posts
    Member since:
    Jun 2008

    Posted 04 Aug 2009 Link to this post

    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


  11. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 07 Aug 2009 Link to this post

    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.
  12. ABC
    ABC avatar
    7 posts
    Member since:
    Jul 2008

    Posted 14 Sep 2009 Link to this post

    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> 
     



  13. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 14 Sep 2009 Link to this post

    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.
  14. ABC
    ABC avatar
    7 posts
    Member since:
    Jul 2008

    Posted 14 Sep 2009 Link to this post

    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
  15. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 17 Sep 2009 Link to this post

    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.
  16. ABC
    ABC avatar
    7 posts
    Member since:
    Jul 2008

    Posted 17 Sep 2009 Link to this post

    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
  17. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 23 Sep 2009 Link to this post

    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.
  18. Noah
    Noah avatar
    9 posts
    Member since:
    Dec 2008

    Posted 29 Sep 2009 Link to this post

    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



  19. Axel
    Axel avatar
    41 posts
    Member since:
    Jul 2009

    Posted 15 Oct 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017