I am having trouble setting the height and width of my page to 100% of the browser size.
My aspx ...
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> |
<%@ 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>D.A.R. Enterprises - Home</title> |
<meta content="Online Accounting, Online Accounts, D.A.R. Enterprises, DAR Enterprises, David Robertson, Intranet, Financial Solutions, Money, Cash Book, Journal, Company Secretary, Time Recording, Customer Relationship Management, CRM, Payroll, Support, Estate Agency Management, Corporate Accounting, Helpdesk" |
name="keywords" /> |
<meta name="description" content="dareSOFT is an online accounts and business solution for all sizes of firm. Currently optimised for UK firms." /> |
<meta name="author" content="David Robertson" /> |
<meta name="publisher" content="http://www.dare-it.co.uk" /> |
<meta name="language" content="English" /> |
<meta name="copyright" content="Copyright © D.A.R. Enterprises 2007. All rights reserved." /> |
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR" /> |
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE" /> |
<meta content="VBScript" name="vs_defaultClientScript" /> |
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" /> |
<link href="css/main.css" type="text/css" rel="Stylesheet" /> |
<link href="css/skin.css" type="text/css" rel="stylesheet" /> |
</head> |
<body> |
<form id="formDefault" runat="server" class="formDefault"> |
<asp:ScriptManager ID="smDefault" runat="server" /> |
<telerik:RadAjaxLoadingPanel ID="ralpDefault" runat="server" Height="75px" Width="75px"> |
<asp:Image ID="imgLoading" runat="server" AlternateText="Loading..." ImageUrl="RadControls/Ajax/Skins/Default/Loading.gif" /> |
</telerik:RadAjaxLoadingPanel> |
<telerik:RadSplitter ID="rsDefaultMain" runat="server" CssClass="rsDefaultMain"> |
<telerik:RadPane ID="rpDefaultLeftSlidingZone" runat="server" CssClass="rpDefaultLeftSlidingZone" Locked="true"> |
<telerik:RadSlidingZone ID="rszDefaultLeftSlidingZone" Runat="server" CssClass="rszDefaultLeftSlidingZone"> |
<telerik:RadSlidingPane ID="rspDefaultLoginDS" runat="server" CssClass="rspDefaultLoginDS" Title="dareSOFT Login"> |
</telerik:RadSlidingPane> |
<telerik:RadSlidingPane ID="rspDefaultLoginDARE" runat="server" CssClass="rspDefaultLoginDARE" Title="D.A.R. Enterprises Login"> |
</telerik:RadSlidingPane> |
</telerik:RadSlidingZone> |
</telerik:RadPane> |
<telerik:RadPane ID="rpDefaultPage" runat="server" CssClass="rpDefaultPage" Locked="true"> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</form> |
</body> |
</html> |
body |
{ |
margin: 0px; |
padding: 0px; |
height: 100%; |
width: 100%; |
} |
.rsDefaultMain |
{ |
background-color: Transparent; |
margin: 0px; |
padding: 0px; |
height: 100%; |
width: 100%; |
} |
.rpDefaultPage |
{ |
background-color: Transparent; |
margin: 0px; |
padding: 0px; |
height: 100%; |
width: 100%; |
} |
.rspDefaultLoginDS |
{ |
background-color: Transparent; |
margin: 0px; |
padding: 0px; |
height: 100%; |
width: 350px; |
} |
.rspDefaultLoginDARE |
{ |
background-color: Transparent; |
margin: 0px; |
padding: 0px; |
height: 100%; |
width: 350px; |
} |
.rszDefaultLeftSlidingZone |
{ |
background-color: Transparent; |
margin: 0px; |
padding: 0px; |
height: 100%; |
width: 0px; |
} |
.rpDefaultLeftSlidingZone |
{ |
background-color: Transparent; |
margin: 0px; |
padding: 0px; |
height: 100%; |
width: 0px; |
} |
.formDefault |
{ |
height: 100%; |
width: 100%; |
} |
Please advise as how to continue.
Kind Regards
David
12 Answers, 1 is accepted
You should set the Height of all parent elements of the RadSplitter to 100%. Have a look at our online example for details.
All the best,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
I tried your suggestions to no avail.
My ammended aspx is as below ...
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> |
<%@ Register TagPrefix="dare" TagName="meta" Src="resources/meta.ascx" %> |
<%@ 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>D.A.R. Enterprises - Home</title> |
<dare:meta id="meta" runat="server"></dare:meta> |
<link href="css/main.css" type="text/css" rel="Stylesheet" /> |
<link href="css/skin.css" type="text/css" rel="stylesheet" /> |
</head> |
<body> |
<form id="formDefault" runat="server" class="formDefault"> |
<asp:ScriptManager ID="smDefault" runat="server" /> |
<telerik:RadAjaxLoadingPanel ID="ralpDefault" runat="server" Height="75px" Width="75px"> |
<asp:Image ID="imgLoading" runat="server" AlternateText="Loading..." ImageUrl="RadControls/Ajax/Skins/Default/Loading.gif" /> |
</telerik:RadAjaxLoadingPanel> |
<telerik:RadSplitter ID="rsDefaultMain" runat="server" CssClass="rsDefaultMain" Height="100%" Width="100%" Orientation="Vertical"> |
<telerik:RadPane ID="rpDefaultLeftSlidingZone" runat="server" CssClass="rpDefaultLeftSlidingZone" Width="22px" Height="100%"> |
<telerik:RadSlidingZone ID="rszDefaultLeftSlidingZone" Runat="server" CssClass="rszDefaultLeftSlidingZone" Width="22px" Height="100%"> |
<telerik:RadSlidingPane ID="rspDefaultLoginDS" runat="server" CssClass="rspDefaultLoginDS" Title="dareSOFT Login" Width="350px" Height="100%"> |
</telerik:RadSlidingPane> |
<telerik:RadSlidingPane ID="rspDefaultLoginDARE" runat="server" CssClass="rspDefaultLoginDARE" Title="D.A.R. Enterprises Login" Width="350px" Height="100%"> |
</telerik:RadSlidingPane> |
</telerik:RadSlidingZone> |
</telerik:RadPane> |
<telerik:RadPane ID="rpDefaultPage" runat="server" CssClass="rpDefaultPage" Height="100%" Width="100%"> |
<telerik:RadSplitter ID="rsDefaultPage" runat="server" CssClass="rsDefaultPage" Height="100%" Width="100%" Orientation="Horizontal"> |
<telerik:RadPane ID="rpDefaultHeader" runat="server" CssClass="rpDefaultHeader" Width="100%" Height="100px"> |
</telerik:RadPane> |
<telerik:RadPane ID="rpDefaultContent" runat="server" CssClass="rpDefaultContent" Height="100%" Width="100%"> |
</telerik:RadPane> |
<telerik:RadPane ID="rpDefaultFooter" runat="server" CssClass="rpDefaultFooter" Height="50px" Width="100%"> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</form> |
</body> |
</html> |
And my css is as below ...
body |
{ |
margin: 0px; |
height: 100%; |
width: 100%; |
overflow: hidden; |
} |
.rsDefaultMain |
{ |
background-color: Transparent; |
} |
.rsDefaultPage |
{ |
background-color: Transparent; |
} |
.rpDefaultPage |
{ |
background-color: Transparent; |
} |
.rpDefaultHeader |
{ |
background-color: Transparent; |
} |
.rpDefaultContent |
{ |
background-color: Transparent; |
} |
.rpDefaultFooter |
{ |
background-color: Transparent; |
} |
.rspDefaultLoginDS |
{ |
background-color: Transparent; |
} |
.rspDefaultLoginDARE |
{ |
background-color: Transparent; |
} |
.rszDefaultLeftSlidingZone |
{ |
background-color: Transparent; |
} |
.rpDefaultLeftSlidingZone |
{ |
background-color: Transparent; |
} |
.formDefault |
{ |
height: 100%; |
width:100%; |
background-color: Transparent; |
} |
I have tried all combintations including height and width tags on body and form but nothing seems to provide the necessary solution.
If you try my code you will see that it simply puts a very narrow pane at the top of the browser.
Kind REgards
David
Thought I should mention that I am using VS2008 Beta2.
Just as you added the last post Peter I was going to say that I have tried adding height=100% to the html tag and it is rejected as an erroneous element. Regardless of this I ran the project and it still did no work.
Any other suggestions ?
Kind Regards
David
David
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ 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" style="height:100%">
<head runat="server">
<title>Untitled Page</title>
</head>
<body style="height:100%; margin:0px">
<form id="form1" runat="server" style="height:100%">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<telerik:RadSplitter ID="uiSplitter1" runat="server" Width="100%" Height="100%">
<telerik:RadPane ID="uiPanel1" runat="server">
Pane 1
</telerik:RadPane>
<telerik:RadSplitBar ID="uiSplitBar" runat="server" />
<telerik:RadPane ID="uiPanel2" runat="server">
Pane 2
</telerik:RadPane>
</telerik:RadSplitter>
</div>
</form>
</body>
</html>
Thank you for your post.
Unfortunately the style attribute is not available for the html tag so I am unable to use it.
I will try and get it working in VS2005 tonight, but there should not be any real difference in the two.
BTW ... are you using IE 7 ?
Kind Regards
David
As you cannot have a style attribute for the HTML element, just use a class:
<head style="height:100%"> |
<style type="text/css"> |
html |
{ |
height: 100%; |
} |
</style> |
</head> |
Sincerely yours,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Thanks to all contributors this works great now.
Kind Regards
David
I am really sorry but I thought I had it working.
My page displayed with 100% height and width for about two or three times.
But after adding some more code it started going wrong again.
I am attaching my aspx ...
<%@ Page Language="VB" CodeFile="Default.aspx.vb" Inherits="_Default" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<%@ Register TagPrefix="dare" TagName="meta" Src="resources/meta.ascx" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head runat="server"> |
<title>D.A.R. Enterprises - Home</title> |
<dare:meta id="meta" runat="server"></dare:meta> |
<link href="css/main.css" type="text/css" rel="Stylesheet" /> |
<link href="css/skin.css" type="text/css" rel="stylesheet" /> |
</head> |
<body> |
<form id="formDefault" runat="server"> |
<asp:ScriptManager ID="smDefault" runat="server" /> |
<telerik:RadAjaxManager ID="ramDefault" runat="server"> |
</telerik:RadAjaxManager> |
<telerik:RadAjaxLoadingPanel ID="ralpDefault" runat="server" Height="75px" Width="75px" ScrollBars="None"> |
<asp:Image ID="imgLoading" runat="server" AlternateText="Loading..." ImageUrl="RadControls/Ajax/Skins/Default/Loading.gif" /> |
</telerik:RadAjaxLoadingPanel> |
<telerik:RadSplitter ID="rsDefaultMain" runat="server" CssClass="rsDefaultMain" Height="100%" Width="100%" Orientation="Vertical"> |
<telerik:RadPane ID="rpDefaultLeftSlidingZone" runat="server" CssClass="rpDefaultLeftSlidingZone" Width="22px" Height="100%" Scrolling="None"> |
<telerik:RadSlidingZone ID="rszDefaultLeftSlidingZone" Runat="server" |
CssClass="rszDefaultLeftSlidingZone" Height="100%" Width="22px"> |
<telerik:RadSlidingPane ID="rspDefaultLoginDS" runat="server" |
CssClass="rspDefaultLoginDS" Width="350px" Height="100%"> |
<telerik:RadSplitter ID="rsDefaultLoginDS" runat="server" CssClass="rsDefaultLoginDS" Height="100%" Width="100%" Orientation="Horizontal"> |
<telerik:RadPane ID="rpDefaultLoginDS" runat="server" CssClass="rpDefaultLoginDS" Scrolling="None" Width="100%" Height="100%"> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</telerik:RadSlidingPane> |
<telerik:RadSlidingPane ID="rspDefaultLoginDARE" runat="server" |
CssClass="rspDefaultLoginDARE" Width="350px" Height="100%"> |
<telerik:RadSplitter ID="rsDefaultLoginDARE" runat="server" CssClass="rsDefaultLoginDARE" Height="100%" Width="100%" Orientation="Horizontal"> |
<telerik:RadPane ID="rpDefaultLoginDARE" runat="server" CssClass="rpDefaultLoginDARE" Scrolling="None" Width="100%" Height="100%"> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</telerik:RadSlidingPane> |
</telerik:RadSlidingZone> |
</telerik:RadPane> |
<telerik:RadPane ID="rpDefaultPage" runat="server" CssClass="rpDefaultPage" Width="100%" Height="100%" Scrolling="None"> |
<telerik:RadSplitter ID="rsDefaultPage" runat="server" CssClass="rsDefaultPage" |
Height="100%" Orientation="Horizontal" Width="100%"> |
<telerik:RadPane ID="rpDefaultHeader" runat="server" |
CssClass="rpDefaultHeader" Height="100px" Scrolling="None" Width="100%"> |
</telerik:RadPane> |
<telerik:RadPane ID="rpDefaultContent" runat="server" |
CssClass="rpDefaultContent" Height="100%" Scrolling="Both" Width="100%"> |
</telerik:RadPane> |
<telerik:RadPane ID="rpDefaultFooter" runat="server" |
CssClass="rpDefaultFooter" Height="50px" Scrolling="None" Width="100%"> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</form> |
</body> |
</html> |
html |
{ |
height: 100%; |
} |
body |
{ |
margin: 0px; |
height: 100%; |
width: 100%; |
overflow: hidden; |
} |
form |
{ |
height: 100%; |
width:100%; |
background-color: Transparent; |
} |
.rsDefaultMain |
{ |
background-color: Transparent; |
} |
.rpDefaultPage |
{ |
background-color: Transparent; |
} |
.rsDefaultPage |
{ |
background-color: Transparent; |
} |
.rpDefaultPage |
{ |
background-color: Transparent; |
} |
.rpDefaultHeader |
{ |
background-color: Transparent; |
} |
.rpDefaultContent |
{ |
background-color: Transparent; |
} |
.rpDefaultFooter |
{ |
background-color: Transparent; |
} |
.rspDefaultLoginDS, .rspDefaultLoginDARE |
{ |
background-color: Blue; |
} |
.rpDefaultLoginDS, .rpDefaultLoginDARE |
{ |
background-color: Blue; |
} |
.rsDefaultLoginDS, .rsDefaultLoginDARE |
{ |
background-color: Blue; |
} |
.rszDefaultLeftSlidingZone |
{ |
background-color: Transparent; |
} |
.rpDefaultLeftSlidingZone |
{ |
background-color: Transparent; |
} |
I hope you can diagnose my problem.
Kind Regards
David
Could you please prepare and send us a simple running project that demonstrates the result you get as an attachment to a new support ticket? Unfortunately the code you provided is not enough for us to determine the cause for the problem.
Regards,
Tsvetie
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
The problem seems to have magically fixed itself.
I think the css file was not being picked up correctly.
Kind Regards
David