Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
Rank 1
Fusion Outsourcing Software Pvt. Ltd.
asked on 04 Jun 2009, 11:04 AM
Hello Telerik Team,
I am facing a problem with Nested Splitters.My Application not Occupying the whole Browser window height(100%) in IE7.0. I have pasted the css, & aspx Code snippet below.
Please Guide us how to attain the full browser window height.
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %> |
| <%@ 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>CRM</title> |
| <link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> |
| <link href="Telerik/RadSplitter/SampleSpliter/Splitter.SampleSpliter.css" rel="stylesheet" |
| type="text/css" /> |
| </head> |
| <body> |
| <form runat="server" id="frmCRM" style="height: 100%"> |
| <div id="wrapper"> |
| <telerik:RadAjaxManager runat="server" ID="ajax_manager"> |
| </telerik:RadAjaxManager> |
| <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
| </telerik:RadScriptManager> |
| <div id="content"> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane" |
| Width="100%" Orientation="Horizontal" Skin="SampleSpliter" EnableEmbeddedSkins="false" |
| ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" |
| BorderSize="0" BorderStyle="None" BorderWidth="0px" FullScreenMode="false"> |
| <telerik:RadPane ID="RadPane1" Scrolling="None" runat="server" Width="98%" Height="30%" |
| BackColor="#A6DBFF" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
| Vipin |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Width="100%" /> |
| <telerik:RadPane ID="RadPane2" Scrolling="None" runat="server" Width="98%" Height="100%" |
| BackColor="#ff0000" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
| <telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" ResizeMode="AdjacentPane" |
| Width="100%" Orientation="Vertical" Skin="SampleSpliter" EnableEmbeddedSkins="false" |
| ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" |
| BorderSize="0" BorderStyle="None" BorderWidth="0px"> |
| <telerik:RadPane ID="RadPane3" Scrolling="None" runat="server" Width="16%" Height="100%" |
| BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Width="20px" |
| Height="100%" /> |
| <telerik:RadPane ID="RadPane4" Scrolling="None" runat="server" Width="26%" Height="100%" |
| BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" Width="20px" |
| Height="100%" /> |
| <telerik:RadPane ID="RadPane5" Scrolling="None" runat="server" Width="58%" Height="100%" |
| BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> |
| </telerik:RadPane> |
| <telerik:RadSplitBar ID="RadSplitBar4" runat="server" CollapseMode="Forward" Width="20px" |
| Height="100%" /> |
| </telerik:RadSplitter> |
| </telerik:RadPane> |
| </telerik:RadSplitter></div> |
| <div id="footer"> |
| </div> |
| </div> |
| </form> |
| </body> |
| </html> |
| // CSS |
| html, body { |
| font-family: sans-serif, serif, "Trebuchet MS", Verdana; |
| font-size: 11px; |
| font-weight: normal; |
| color: #000000; |
| text-decoration: none; |
| line-height: 18px; |
| margin: 0px; |
| padding: 0px; |
| height: 100%; |
| } |
| #wrapper { |
| padding: 0px; |
| width: 99%; |
| margin-top: 0px; |
| margin-right: auto; |
| margin-bottom: 0px; |
| margin-left: 0px; |
| height: 99%; |
| position: absolute; |
| clip: rect(0px,auto,auto,0px); |
| background-color: #f8f8f8; |
| } |
| #header { |
| margin: 0px; |
| padding: 0px; |
| float: left; |
| width: 100%; |
| height: 15%; |
| border: 1px solid #A6DBFF; |
| background-color: #A6DBFF; |
| } |
| #content { |
| margin: 0px; |
| padding: 0px; |
| float: left; |
| width: 100%; |
| border-right-width: 1px; |
| border-left-width: 1px; |
| border-right-style: solid; |
| border-left-style: solid; |
| border-right-color: #A6DBFF; |
| border-left-color: #A6DBFF; |
| border-bottom-width: 1px; |
| border-bottom-style: solid; |
| border-bottom-color: #A6DBFF; |
| height: 98%; |
| } |
| #content #leftcolumn { |
| margin: 0px; |
| float: left; |
| width: 15%; |
| padding-top: 0px; |
| padding-right: 0px; |
| padding-bottom: 1%; |
| padding-left: 0px; |
| } |
| #content #centrecolumn { |
| margin: 0px; |
| float: left; |
| width: 26%; |
| border-right-width: 1px; |
| border-right-style: solid; |
| border-right-color: #A6DBFF; |
| padding-top: 0px; |
| padding-right: 0px; |
| padding-bottom: 1%; |
| padding-left: 0px; |
| height: 98%; |
| border-left-width: 1px; |
| border-left-style: solid; |
| border-left-color: #A6DBFF; |
| } |
| #content #rightcolumn { |
| margin: 0px; |
| float: left; |
| width: 48%; |
| padding-top: 0px; |
| padding-right: 0px; |
| padding-bottom: 1%; |
| padding-left: 0px; |
| height: 98%; |
| } |
| #footer { |
| margin: 0px; |
| padding: 0px; |
| clear: both; |
| height: 2%; |
| border-right-width: 1px; |
| border-bottom-width: 1px; |
| border-left-width: 1px; |
| border-right-style: solid; |
| border-bottom-style: solid; |
| border-left-style: solid; |
| border-right-color: #A6DBFF; |
| border-bottom-color: #A6DBFF; |
| border-left-color: #A6DBFF; |
| width: 100%; |
| font-size: 10px; |
| background-color: #A6DBFF; |
| } |
| #content .top { |
| margin: 0px; |
| padding: 0px; |
| float: left; |
| height: 100%; |
| width: 100%; |
| border-bottom-width: 1px; |
| border-bottom-style: solid; |
| border-bottom-color: #A6DBFF; |
| } |
| #content .bottom { |
| margin: 0px; |
| padding: 0px; |
| float: left; |
| height: 100%; |
| width: 100%; |
| } |
2 Answers, 1 is accepted
0
Accepted
Hi Fusion,
In order to get the desired result, you should explicitly set Height=100% to the RadSplitter which is the outermost one as shown below:
I also recommend to set height 100% , margin 0 and padding 0 to the <form> element as well as for the <html> and <body> as shown below:
Kind regards,
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.
In order to get the desired result, you should explicitly set Height=100% to the RadSplitter which is the outermost one as shown below:
| <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane" |
| Width="100%" Height="100%" |
| ............................................................. |
I also recommend to set height 100% , margin 0 and padding 0 to the <form> element as well as for the <html> and <body> as shown below:
| html, body, form { |
| font-family: sans-serif, serif, "Trebuchet MS", Verdana; |
| font-size: 11px; |
| font-weight: normal; |
| color: #000000; |
| text-decoration: none; |
| line-height: 18px; |
| margin: 0px; |
| padding: 0px; |
| height: 100%; |
| } |
Kind regards,
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
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
Rank 1
answered on 06 Jun 2009, 07:15 AM
Thank You,
For now my Problem is solved. Your Work around solved my problem.
Chinmay Sharma.
For now my Problem is solved. Your Work around solved my problem.
Chinmay Sharma.