I have four RadPanelItem in a RadPanelBar. I want to set their heights in percent that they can be resized according to the height of the Browser. I have tried with ChildGroupHeight but this does not work. My code looks like this.
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestUI1.aspx.cs" Inherits="TestUI1" %> |
| <%@ 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 runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| html, body, form |
| { |
| margin: 0; |
| padding: 0; |
| height: 100%; /* this is the key! */ |
| font-size: 11px; |
| } |
| #main_container |
| { |
| position: absolute; |
| left: 0; |
| top: 0; |
| padding: 0; |
| width: 100%; |
| height: 100%; /* works only if parent container is assigned a height value */ |
| color: #333; |
| background-color: #83b0ec; |
| background-image: url("images/navshape.jpg"); |
| background-repeat: repeat-x; |
| } |
| #sub_container |
| { |
| padding: 0px 10px 0px 10px; |
| } |
| #site_header |
| { |
| padding-left: 30px; |
| padding-top: 30px; |
| height: 80px; |
| } |
| .RadPanelBar_Windows7 .rpLink .rpText |
| { |
| font-weight:bold; |
| font-size:13px; |
| color:#003366; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" /> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" /> |
| <div id="main_container"> |
| <div id="sub_container"> |
| <div id="site_header"> |
| <asp:Image ID="Image1" runat="server" BorderWidth="0" ImageUrl="~/images/ClaimShare.gif" |
| AlternateText="Claim Share" /> |
| </div> |
| <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> |
| <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Skin="Windows7" Width="100%" ExpandMode="multipleexpandeditems" Height="100%"> |
| <Items> |
| <telerik:RadPanelItem Text="Cases" Expanded="true" ImageUrl="~/images/icons/search.png" Width="100%" ChildGroupHeight="20%"> |
| <ItemTemplate> |
| <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="150px" Width="100%" |
| EnableAutomaticLoadOnDemand="True" AutoPostBack="true" Skin="Outlook" EmptyMessage="Søg" |
| DataSourceID="ObjectDataSource1" ShowMoreResultsBox="true" DataTextField="CLLH_x0020_Claim_x0020_Number" |
| DataValueField="CLLH_x0020_Claim_x0020_Number"> |
| </telerik:RadComboBox> |
| </ItemTemplate> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem Text="New Cases" Expanded="true" ImageUrl="~/images/icons/new.png" Width="100%" ChildGroupHeight="30%"> |
| <Items> |
| <telerik:RadPanelItem> |
| <ItemTemplate> |
| <telerik:RadGrid ID="rgNewCases" runat="server" AllowSorting="True" GridLines="None" |
| DataSourceID="odsNewCases" > |
| <MasterTableView AutoGenerateColumns="False" DataSourceID="odsNewCases" DataKeyNames="CLLH_x0020_Claim_x0020_Number" |
| Width="100%"> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </ExpandCollapseColumn> |
| <ItemStyle VerticalAlign="top" /> |
| <AlternatingItemStyle VerticalAlign="top" /> |
| <Columns> |
| <telerik:GridBoundColumn DataField="CLLH_x0020_Claim_x0020_Number" HeaderText="Cllh claim nr." |
| HeaderStyle-Wrap="false" SortExpression="CLLH_x0020_Claim_x0020_Number" UniqueName="CLLH_x0020_Claim_x0020_Number" |
| HeaderStyle-Width="30%"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="Client" HeaderText="Client" SortExpression="Client" |
| UniqueName="Client" HeaderStyle-Width="35%"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="Insured_x0020_Name" HeaderText="Insured" SortExpression="Insured_x0020_Name" |
| UniqueName="Insured_x0020_Name" HeaderStyle-Width="35%"> |
| </telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnablePostBackOnRowClick="true"> |
| <Selecting AllowRowSelect="true" /> |
| <Scrolling AllowScroll="True" UseStaticHeaders="True" /> |
| </ClientSettings> |
| </telerik:RadGrid> |
| </ItemTemplate> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem Text="My followups" Expanded="true" ImageUrl="~/images/icons/followup.png" Width="100%" ChildGroupHeight="30%"> |
| <Items> |
| <telerik:RadPanelItem> |
| <ItemTemplate> |
| <telerik:RadGrid ID="rgFollowUps" runat="server" AllowSorting="True" GridLines="None" |
| DataSourceID="odsDSFollowups" > |
| <ClientSettings EnablePostBackOnRowClick="true"> |
| <Selecting AllowRowSelect="true" /> |
| </ClientSettings> |
| <MasterTableView AutoGenerateColumns="False" DataSourceID="odsDSFollowups" DataKeyNames="CLLHClaimNumber" |
| Width="100%"> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </ExpandCollapseColumn> |
| <ItemStyle VerticalAlign="top" /> |
| <AlternatingItemStyle VerticalAlign="top" /> |
| <Columns> |
| <telerik:GridBoundColumn DataField="CLLHClaimNumber" HeaderText="Cllh claim nr." |
| HeaderStyle-Wrap="false" SortExpression="CLLHClaimNumber" UniqueName="CLLHClaimNumber" |
| HeaderStyle-Width="30%"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="Client" HeaderText="Client" SortExpression="Client" |
| UniqueName="Client" HeaderStyle-Width="35%"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="InsuredName" HeaderText="Insured" SortExpression="InsuredName" |
| UniqueName="InsuredName" HeaderStyle-Width="35%"> |
| </telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnablePostBackOnRowClick="true"> |
| <Selecting AllowRowSelect="true" /> |
| <Scrolling AllowScroll="True" UseStaticHeaders="True" /> |
| </ClientSettings> |
| </telerik:RadGrid> |
| </ItemTemplate> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| <telerik:RadPanelItem Text="My opened cases" Expanded="True" ImageUrl="~/images/icons/star.png" Width="100%" ChildGroupHeight="20%"> |
| <Items> |
| <telerik:RadPanelItem> |
| <ItemTemplate> |
| <telerik:RadGrid ID="rgMyOpenedCases" runat="server" AllowSorting="True" GridLines="None" |
| DataSourceID="odsMyOpenCases" > |
| <ClientSettings EnablePostBackOnRowClick="true"> |
| <Selecting AllowRowSelect="true" /> |
| </ClientSettings> |
| <MasterTableView AutoGenerateColumns="False" DataSourceID="odsMyOpenCases" DataKeyNames="CLLH_x0020_Claim_x0020_Number" |
| Width="100%"> |
| <RowIndicatorColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </RowIndicatorColumn> |
| <ExpandCollapseColumn> |
| <HeaderStyle Width="20px"></HeaderStyle> |
| </ExpandCollapseColumn> |
| <ItemStyle VerticalAlign="top" /> |
| <AlternatingItemStyle VerticalAlign="top" /> |
| <Columns> |
| <telerik:GridBoundColumn DataField="CLLH_x0020_Claim_x0020_Number" HeaderText="Cllh claim nr." |
| HeaderStyle-Wrap="false" SortExpression="CLLH_x0020_Claim_x0020_Number" UniqueName="CLLH_x0020_Claim_x0020_Number" |
| HeaderStyle-Width="30%"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="Client" HeaderText="Client" SortExpression="Client" |
| UniqueName="Client" HeaderStyle-Width="35%"> |
| </telerik:GridBoundColumn> |
| <telerik:GridBoundColumn DataField="Insured_x0020_Name" HeaderText="Insured" SortExpression="Insured_x0020_Name" |
| UniqueName="Insured_x0020_Name" HeaderStyle-Width="35%"> |
| </telerik:GridBoundColumn> |
| </Columns> |
| </MasterTableView> |
| <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnablePostBackOnRowClick="true"> |
| <Selecting AllowRowSelect="true" /> |
| <Scrolling AllowScroll="True" UseStaticHeaders="True" /> |
| </ClientSettings> |
| </telerik:RadGrid> |
| </ItemTemplate> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelItem> |
| </Items> |
| </telerik:RadPanelBar> |
| </telerik:RadAjaxPanel> |
| <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetClaimsNumberList" TypeName="CLLH.TPA.WebCommon" /> |
| <asp:ObjectDataSource ID="odsNewCases" runat="server" SelectMethod="GetNewCases" TypeName="CLLH.TPA.WebCommon" /> |
| <asp:ObjectDataSource ID="odsDSFollowups" runat="server" SelectMethod="GetFollowups" TypeName="CLLH.TPA.WebCommon" /> |
| <asp:ObjectDataSource ID="odsMyOpenCases" runat="server" SelectMethod="GetMyOpenedCases" TypeName="CLLH.TPA.WebCommon" /> </div> |
| </div> |
| </form> |
| </body> |
| </html> |
Your quick response in this regard will be highly appreciated.
1 Answer, 1 is accepted
0
Hi Aftab,
Unfortunately, in order to have element height in percent in all modern browsers, you will need to have height set on all its block containers (or pixel height on the element parent). This means that you need percent height on your #sub_container, AjaxPanel and part of the RadPanelBar elements. However, when browsers measure layout, they don't take into account paddings, margins and you'll probably end up with not very well sized elements. I've modified your markup to partially fit your requirements (though I had to remove any database components), check if it can be of any help (it won't work in IE6 or 7 though, since they measure the box layout differently).
Regards,
Kamen Bundev
the Telerik team
Unfortunately, in order to have element height in percent in all modern browsers, you will need to have height set on all its block containers (or pixel height on the element parent). This means that you need percent height on your #sub_container, AjaxPanel and part of the RadPanelBar elements. However, when browsers measure layout, they don't take into account paddings, margins and you'll probably end up with not very well sized elements. I've modified your markup to partially fit your requirements (though I had to remove any database components), check if it can be of any help (it won't work in IE6 or 7 though, since they measure the box layout differently).
Regards,
Kamen Bundev
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items