RadSplitter Height 100% issue

6 posts, 1 answers
  1. Srinivas Nilagiri
    Srinivas Nilagiri avatar
    14 posts
    Member since:
    Dec 2009

    Posted 30 Dec 2009 Link to this post

    Hi All, 
    I got this RadSplitter test page which takes 100% of the browser's height.
    But this only seems working when there is no content before the splitter. If I have some other content above the div that contains RadSplitter this is not working. I am expecting the RadSplitter to take the remaining height available (leaving 120px on top).
    Please help me to achieve this. I have tested this in IE 8 and FF 3.5.

    Please note I have added 

    <

     

    div style="height:120px;">

     

        some other content

     

    </div>

     

    on top of the div that contains RadSplitter.
    <%@ Page Language="C#" %> 
    <%@ 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="text/css">   
        html, body, form   
        {   
            height: 100%;   
            margin: 0px;   
            padding: 0px;   
        }   
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
            <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager> 
            <div style="height:120px;">  
               some other content  
            </div> 
            <div style="height:100%;">  
            <telerik:RadSplitter ID="s1" runat="server" Orientation="Horizontal" Height="100%" Width="100%">  
                <telerik:RadPane ID="p1" runat="server" Height="150px">  
                    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">  
                    DESCRIPTION:  
                    <asp:TextBox ID="DESCRIPTIONTextBox" runat="server" Text="Test Splitter."></asp:TextBox> 
                    <br /> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
            </div> 
        </form> 
    </body> 
    </html> 
     

    Thanks.
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 31 Dec 2009 Link to this post

    Hello Srinivas,

    In this configuration, the splitter will become as big as its parent DIV element. However, you have one DIV which is 100% height and another DIV which is 120px high - this means that the 100% high DIV will occupy exactly 100% of the visible viewport and the additional 120px from the other DIV will exceed these 100% and you will get undesired scrollbars.

    In order to make the splitter occupy all the available space except for the header DIV you should remove the other DIV and also set the HeightOffset property to the height of the external DIV - 120px in your case as shown below:

    <%@ Page Language="C#" %>  
    <%@ 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="text/css">    
        html, body, form    
        {    
            height: 100%;    
            margin: 0px;    
            padding: 0px;    
        }    
        </style>  
    </head>  
    <body>  
        <form id="form1" runat="server">   
            <asp:ScriptManager ID="ScriptManager1" runat="server">   
            </asp:ScriptManager>  
            <div style="height:120px;">   
               some other content   
            </div>   
            <telerik:RadSplitter ID="s1" runat="server" HeightOffset="120"  VisibleDuringInit="false" Orientation="Horizontal" Height="100%" Width="100%">   
                <telerik:RadPane ID="p1" runat="server" Height="150px">   
                    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">   
                    DESCRIPTION:   
                    <asp:TextBox ID="DESCRIPTIONTextBox" runat="server" Text="Test Splitter."></asp:TextBox>  
                    <br />  
                </telerik:RadPane>  
            </telerik:RadSplitter>  
        </form>  
    </body>  
    </html>  
       

    On a side note, I also suggest to set VisibleDuringInit="false" in order to hide the initial resize of the splitter and to get a better behavior.
     
    I hope that my reply 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Srinivas Nilagiri
    Srinivas Nilagiri avatar
    14 posts
    Member since:
    Dec 2009

    Posted 03 Jan 2010 Link to this post

    Hi Svetlina,
    Thanks for the help. It works.
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Jan 2010 Link to this post

    Hi Srinivas Nilagiri,

    I am glad I could help. In case you experience any further problems, do not hesitate to contact us again.

    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.
  6. achuki bhalotia
    achuki bhalotia avatar
    1 posts
    Member since:
    Aug 2009

    Posted 28 May 2013 Link to this post

    Hi,
    I'm also facing problem in 100% height of splitter inside table cell. Below is the code for reference:
    <br><%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ComponentMaster.aspx.cs"<br>    Inherits="Reiman.RPMenu.Applications.Grid.ComponentMaster" Title="Maintain Grid Component Master" %><br><br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head runat="server"><br>    <title></title><br>    <link href="../Styles/Style.css" rel="stylesheet" type="text/css" /><br></head><br><body><br>    <form id="form2" runat="server"><br>    <asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="True" /><br>    <asp:Table ID="MainTable" runat="server" BackColor="Control" Height="98%" Width="90%"<br>        BorderWidth="1px" BorderStyle="Groove" CellPadding="0" CellSpacing="0" HorizontalAlign="Center"><br>        <asp:TableRow ID="TableRow1" runat="server" Width="100%" VerticalAlign="Top"><br>            <asp:TableCell ID="TableCell1" runat="server" Width="100%" VerticalAlign="Top"><br>  <telerik:RadToolBar ID="mnuMain" runat="server" Width="100%" Height="50%" BackColor="Control"<br>                    OnClientButtonClicking="OnClientButtonClicking"><br>                    <Items><br>                        <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="File"><br>                            <Buttons><br>                                <telerik:RadToolBarButton Text="New" Value="New" CommandName="New" ImageUrl="../Images/new.png"><br>                                </telerik:RadToolBarButton><br>                                <telerik:RadToolBarButton Text="Open" Value="Open" CommandName="Open" ImageUrl="../Images/open.png"><br>                                </telerik:RadToolBarButton><br>                                <telerik:RadToolBarButton Text="Delete" Value="Delete" CommandName="Delete" ImageUrl="../Images/Delete.png"><br>                                </telerik:RadToolBarButton><br>                                <telerik:RadToolBarButton Text="Print" Value="Print" CommandName="Print" ImageUrl="../Images/print.png"><br>                                </telerik:RadToolBarButton><br>                                <telerik:RadToolBarButton IsSeparator="true"><br>                                </telerik:RadToolBarButton><br>                                <telerik:RadToolBarButton Text="Exit" Value="Exit" CommandName="Exit" EnableImageSprite="false"><br>                                </telerik:RadToolBarButton><br>                            </Buttons><br>                        </telerik:RadToolBarSplitButton><br>                        <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="View"><br>                            <Buttons><br>                                <telerik:RadToolBarButton Text="Find" Value="Find" CommandName="Find" ImageUrl="../Images/find.png"><br>                                </telerik:RadToolBarButton><br>                                <telerik:RadToolBarButton Text="Refresh" Value="Refresh" CommandName="Refresh" ImageUrl="../Images/refresh.bmp"><br>                                </telerik:RadToolBarButton><br>                            </Buttons><br>                        </telerik:RadToolBarSplitButton><br>                        <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="Help"><br>                            <Buttons><br>                                <telerik:RadToolBarButton Text="About" Value="About" CommandName="About"><br>                                </telerik:RadToolBarButton><br>                            </Buttons><br>                        </telerik:RadToolBarSplitButton><br>                    </Items><br>                </telerik:RadToolBar><br>                <telerik:RadToolBar ID="RadToolBar2" runat="server" Width="100%" Height="50%" BackColor="Control"<br>                    OnClientButtonClicking="OnClientButtonClicking"><br>                    <Items><br>                        <telerik:RadToolBarButton ImageUrl="~/Images/new.png" Text="New" CommandName="New"><br>                        </telerik:RadToolBarButton><br>                        <telerik:RadToolBarButton ImageUrl="~/Images/open.png" Text="Open" CommandName="Open"><br>                        </telerik:RadToolBarButton><br>                        <telerik:RadToolBarButton ImageUrl="~/Images/Delete.png" Text="Delete" CommandName="Delete"><br>                        </telerik:RadToolBarButton><br>                        <telerik:RadToolBarButton ImageUrl="~/Images/find.png" Text="Find" CommandName="Find"><br>                        </telerik:RadToolBarButton><br>                        <telerik:RadToolBarButton ImageUrl="~/Images/refresh.bmp" Text="Refresh" CommandName="Refresh"><br>                        </telerik:RadToolBarButton><br>                        <telerik:RadToolBarButton ImageUrl="~/Images/save.png" Text="Save Settings" CommandName="Save"><br>                        </telerik:RadToolBarButton><br>                    </Items><br>                </telerik:RadToolBar><br>            </asp:TableCell><br>        </asp:TableRow><br>        <asp:TableRow ID="TableRow2" runat="server" Width="100%" VerticalAlign="Top"><br>            <asp:TableCell ID="TableCell2" runat="server" Width="100%" VerticalAlign="Top"><br>  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"><br>                    <ClientEvents OnRequestStart="RequestStart()" /><br>                    <AjaxSettings><br>                        <telerik:AjaxSetting AjaxControlID="grdMain"><br>                            <UpdatedControls><br>                                <telerik:AjaxUpdatedControl ControlID="grdMain" LoadingPanelID="RadAjaxLoadingPanel1"><br>                                </telerik:AjaxUpdatedControl><br>                            </UpdatedControls><br>                        </telerik:AjaxSetting><br>                        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"><br>                            <UpdatedControls><br>                                <telerik:AjaxUpdatedControl ControlID="grdMain" LoadingPanelID="RadAjaxLoadingPanel1" /><br>                            </UpdatedControls><br>                        </telerik:AjaxSetting><br>                    </AjaxSettings><br>                </telerik:RadAjaxManager><br>                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true"<br>                    CssClass="MyModalPanel" Transparency="50" BackColor="Control" BackImageUrl="~/Images/circle-ball-dark-antialiased.gif" /><br>                <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%"<br>                    Orientation="Horizontal" FullScreenMode="true"><br>                    <telerik:RadPane ID="findPanel" runat="server" Height="20%"><br>                        <asp:Label ID="lblPos" runat="server" Text="Position To" Font-Bold="true" CssClass="lbl"></asp:Label><br /><br>                        <asp:Label ID="lblComp" runat="server" Text="Component" CssClass="lbl"></asp:Label><br>                        <asp:TextBox ID="txtPositionToComponent" runat="server"></asp:TextBox><br /><br>                        <br /><br>                        <asp:Button ID="btnFindNow" runat="server" Text="Find Now" OnClick="btnFindNow_OnClick" /><br>                        <asp:Button ID="btnNewSearch" runat="server" Text="New Search" OnClick="btnNewSearch_OnClick"<br>                            OnClientClick="Confirm()" /><br>                    </telerik:RadPane><br>                    <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"><br>                    </telerik:RadSplitBar><br>                    <telerik:RadPane ID="RadPane1" runat="server" PersistScrollPosition="False" Height="80%"><br>                        <telerik:RadGrid ID="grdMain" runat="server" AutoGenerateColumns="false" AllowSorting="True"<br>                            OnPreRender="grdMain_PreRender" OnSortCommand="grdMain_SortCommand" OnNeedDataSource="grdMain_NeedDataSource"<br>                            ClientSettings-ColumnsReorderMethod="Reorder" ClientSettings-ReorderColumnsOnClient="true"<br>                            PagerStyle-AlwaysVisible="true" EnableHeaderContextMenu="true" PageSize="25"<br>                            Width="98%" AllowPaging="true" PagerStyle-Position="Top" PagerStyle-Mode="NextPrevNumericAndAdvanced"><br>                            <MasterTableView DataKeyNames="ComponentID" AutoGenerateColumns="false" EnableColumnsViewState="true"<br>                                ClientDataKeyNames="ComponentID" TableLayout="Fixed" Width="100%"><br>                                <Columns><br>                                    <telerik:GridBoundColumn UniqueName="ComponentID" SortExpression="ComponentID" HeaderText="ComponentID"<br>                                        DataField="ComponentID"><br>                                    </telerik:GridBoundColumn><br>                                    <telerik:GridBoundColumn UniqueName="Component" SortExpression="Component" HeaderText="Component"<br>                                        DataField="Component" Resizable="true"><br>                                    </telerik:GridBoundColumn><br>                                    <telerik:GridBoundColumn UniqueName="ComponentType" SortExpression="ComponentType"<br>                                        HeaderText="Component Type" DataField="ComponentType" Resizable="true"><br>                                    </telerik:GridBoundColumn><br>                                    <telerik:GridBoundColumn UniqueName="ComponentSize" SortExpression="ComponentSize"<br>                                        HeaderText="Component Size" DataField="ComponentSize" Resizable="true"><br>                                    </telerik:GridBoundColumn><br>                                    <telerik:GridBoundColumn UniqueName="Inactive" SortExpression="Inactive" HeaderText="Inactive"<br>                                        DataField="Inactive" Resizable="true"><br>                                    </telerik:GridBoundColumn><br>                                    <telerik:GridBoundColumn UniqueName="Blank" SortExpression="Blank" HeaderText=" "<br>                                        DataField="Blank" Resizable="true"><br>                                    </telerik:GridBoundColumn><br>                                </Columns><br>                            </MasterTableView><br>                            <ClientSettings AllowColumnsReorder="true" Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true"<br>                                EnableRowHoverStyle="true"><br>                                <Selecting AllowRowSelect="true" /><br>                                <ClientEvents OnRowDblClick="RowDblClick" OnColumnShown="RefreshGrid" OnColumnHidden="RefreshGrid"><br>                                </ClientEvents><br>                                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" ScrollHeight="80%" /><br>                                <%--<Scrolling AllowScroll="True" UseStaticHeaders="false" ScrollHeight="370px" />--%><br>                                <Resizing AllowRowResize="false" EnableRealTimeResize="false" ResizeGridOnColumnResize="false"<br>                                    AllowColumnResize="True" ClipCellContentOnResize="false" AllowResizeToFit="true"><br>                                </Resizing><br>                            </ClientSettings><br>                        </telerik:RadGrid><br>                    </telerik:RadPane><br>                </telerik:RadSplitter><br>            </asp:TableCell><br>        </asp:TableRow><br>    </asp:Table><br> </form><br></body><br></html><br>


    Also,in RadGrid inside Splitter OnRowDblClick event does not fires on server but works perfectly on local.
  7. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 31 May 2013 Link to this post

    Hello Achuki,

    When you want a Splitter to take size in percentages, you have to make sure that all of its parent also have  size configured in percentages (up to a parent with a fixed size). You can find detailed information on the subject in the following online resources:
        Filling the Entire Page
        Specifying Size
        Resize with Window
        Full Window sample app

    For your convenience I am attaching a simplified page, with your code, so you can see how it should be configured properly.

    Regarding the RadGrid issue, I would suggest you to open a primary support ticket with a detailed explanation of the issue and a sample project reproducing it, so our RadGrid specialists will help you in solving it.

    Hope this information would be helpful for you.

    Kind regards,
    Veselina Raykova
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017