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

RadSplitter Height 100% issue

5 Answers 167 Views

Splitter

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

Srinivas Nilagiri asked on 31 Dec 2009, 03:52 AM

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.

5 Answers, 1 is accepted

Accepted

answered on 31 Dec 2009, 08:51 AM

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.

answered on 28 May 2013, 12:16 PM

Hi,
I'm also facing problem in 100% height of splitter inside table cell. Below is the code for reference:

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ComponentMaster.aspx.cs" Inherits="Reiman.RPMenu.Applications.Grid.ComponentMaster" Title="Maintain Grid Component Master" %> <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" %> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="../Styles/Style.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form2" runat="server"> <asp:ScriptManager runat="server" ID="ScriptManager1" EnablePageMethods="True" /> <asp:Table ID="MainTable" runat="server" BackColor="Control" Height="98%" Width="90%" BorderWidth="1px" BorderStyle="Groove" CellPadding="0" CellSpacing="0" HorizontalAlign="Center"> <asp:TableRow ID="TableRow1" runat="server" Width="100%" VerticalAlign="Top"> <asp:TableCell ID="TableCell1" runat="server" Width="100%" VerticalAlign="Top"> <telerik:RadToolBar ID="mnuMain" runat="server" Width="100%" Height="50%" BackColor="Control" OnClientButtonClicking="OnClientButtonClicking"> <Items> <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="File"> <Buttons> <telerik:RadToolBarButton Text="New" Value="New" CommandName="New" ImageUrl="../Images/new.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Open" Value="Open" CommandName="Open" ImageUrl="../Images/open.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Delete" Value="Delete" CommandName="Delete" ImageUrl="../Images/Delete.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Print" Value="Print" CommandName="Print" ImageUrl="../Images/print.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton IsSeparator="true"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Exit" Value="Exit" CommandName="Exit" EnableImageSprite="false"> </telerik:RadToolBarButton> </Buttons> </telerik:RadToolBarSplitButton> <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="View"> <Buttons> <telerik:RadToolBarButton Text="Find" Value="Find" CommandName="Find" ImageUrl="../Images/find.png"> </telerik:RadToolBarButton> <telerik:RadToolBarButton Text="Refresh" Value="Refresh" CommandName="Refresh" ImageUrl="../Images/refresh.bmp"> </telerik:RadToolBarButton> </Buttons> </telerik:RadToolBarSplitButton> <telerik:RadToolBarSplitButton EnableDefaultButton="false" Text="Help"> <Buttons> <telerik:RadToolBarButton Text="About" Value="About" CommandName="About"> </telerik:RadToolBarButton> </Buttons> </telerik:RadToolBarSplitButton> </Items> </telerik:RadToolBar> <telerik:RadToolBar ID="RadToolBar2" runat="server" Width="100%" Height="50%" BackColor="Control" OnClientButtonClicking="OnClientButtonClicking"> <Items> <telerik:RadToolBarButton ImageUrl="~/Images/new.png" Text="New" CommandName="New"> </telerik:RadToolBarButton> <telerik:RadToolBarButton ImageUrl="~/Images/open.png" Text="Open" CommandName="Open"> </telerik:RadToolBarButton> <telerik:RadToolBarButton ImageUrl="~/Images/Delete.png" Text="Delete" CommandName="Delete"> </telerik:RadToolBarButton> <telerik:RadToolBarButton ImageUrl="~/Images/find.png" Text="Find" CommandName="Find"> </telerik:RadToolBarButton> <telerik:RadToolBarButton ImageUrl="~/Images/refresh.bmp" Text="Refresh" CommandName="Refresh"> </telerik:RadToolBarButton> <telerik:RadToolBarButton ImageUrl="~/Images/save.png" Text="Save Settings" CommandName="Save"> </telerik:RadToolBarButton> </Items> </telerik:RadToolBar> </asp:TableCell> </asp:TableRow> <asp:TableRow ID="TableRow2" runat="server" Width="100%" VerticalAlign="Top"> <asp:TableCell ID="TableCell2" runat="server" Width="100%" VerticalAlign="Top"> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"> <ClientEvents OnRequestStart="RequestStart()" /> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="grdMain"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="grdMain" LoadingPanelID="RadAjaxLoadingPanel1"> </telerik:AjaxUpdatedControl> </UpdatedControls> </telerik:AjaxSetting> <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="grdMain" LoadingPanelID="RadAjaxLoadingPanel1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <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%" Orientation="Horizontal" FullScreenMode="true"> <telerik:RadPane ID="findPanel" runat="server" Height="20%"> <asp:Label ID="lblPos" runat="server" Text="Position To" Font-Bold="true" CssClass="lbl"></asp:Label><br /> <asp:Label ID="lblComp" runat="server" Text="Component" CssClass="lbl"></asp:Label> <asp:TextBox ID="txtPositionToComponent" runat="server"></asp:TextBox><br /> <br /> <asp:Button ID="btnFindNow" runat="server" Text="Find Now" OnClick="btnFindNow_OnClick" /> <asp:Button ID="btnNewSearch" runat="server" Text="New Search" OnClick="btnNewSearch_OnClick" OnClientClick="Confirm()" /> </telerik:RadPane> <telerik:RadSplitBar ID="RadSplitbar1" runat="server" CollapseMode="Forward"> </telerik:RadSplitBar> <telerik:RadPane ID="RadPane1" runat="server" PersistScrollPosition="False" Height="80%"> <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> <telerik:GridBoundColumn UniqueName="ComponentID" SortExpression="ComponentID" HeaderText="ComponentID" DataField="ComponentID"> </telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="Component" SortExpression="Component" HeaderText="Component"

<br>                                        DataField="Component" Resizable="true"><

br> </telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="ComponentType" SortExpression="ComponentType"

<br>                                        HeaderText="Component Type" DataField="ComponentType" Resizable="true"><

br> </telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="ComponentSize" SortExpression="ComponentSize"

<br>                                        HeaderText="Component Size" DataField="ComponentSize" Resizable="true"><

br> </telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="Inactive" SortExpression="Inactive" HeaderText="Inactive"

<br>                                        DataField="Inactive" Resizable="true"><

br> </telerik:GridBoundColumn> <telerik:GridBoundColumn UniqueName="Blank" SortExpression="Blank" HeaderText=" " DataField="Blank" Resizable="true"> </telerik:GridBoundColumn> </Columns> </MasterTableView> <ClientSettings AllowColumnsReorder="true" Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true" EnableRowHoverStyle="true"> <Selecting AllowRowSelect="true" /> <ClientEvents OnRowDblClick="RowDblClick" OnColumnShown="RefreshGrid" OnColumnHidden="RefreshGrid"> </ClientEvents> <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" ScrollHeight="80%" /> <%--<Scrolling AllowScroll="True" UseStaticHeaders="false" ScrollHeight="370px" />--%> <Resizing AllowRowResize="false" EnableRealTimeResize="false" ResizeGridOnColumnResize="false"

<br>                                    AllowColumnResize="True" ClipCellContentOnResize="false" AllowResizeToFit="true"><

br> </Resizing> </ClientSettings> </telerik:RadGrid> </telerik:RadPane> </telerik:RadSplitter> </asp:TableCell> </asp:TableRow> </asp:Table> </form> </body> </html> 

Also,in RadGrid inside Splitter OnRowDblClick event does not fires on server but works perfectly on local.

answered on 31 May 2013, 09:20 AM

Splitter.zip

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadSplitter Height 100% issue

5 Answers, 1 is accepted