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

Height and width not being set to 100% of browser

12 Answers 301 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
hkdave95
Top achievements
Rank 2
hkdave95 asked on 19 Aug 2007, 09:05 PM
Hello

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 &copy; 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> 
and my css ...
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

Sort by
0
Tsvetie
Telerik team
answered on 20 Aug 2007, 07:26 AM
Hi hkdave95,
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
0
hkdave95
Top achievements
Rank 2
answered on 20 Aug 2007, 08:56 PM
Hi

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
0
Patrick Greene
Top achievements
Rank 1
answered on 20 Aug 2007, 09:25 PM
Hi. You also have to set it for the html element and the form element if you haven't done so already. Yes, you read that correctly, the HTML element.
0
hkdave95
Top achievements
Rank 2
answered on 20 Aug 2007, 09:33 PM
Hi

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
0
hkdave95
Top achievements
Rank 2
answered on 20 Aug 2007, 09:44 PM
Opps. Sorry Patrick for calling you Peter, better than calling you Paul.

David
0
Patrick Greene
Top achievements
Rank 1
answered on 20 Aug 2007, 09:50 PM
Here is how I have done it

<%@ 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>

0
hkdave95
Top achievements
Rank 2
answered on 21 Aug 2007, 12:55 PM
Hi Patrick

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
0
Tsvetie
Telerik team
answered on 21 Aug 2007, 01:05 PM
Hi hkdave95,
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
0
hkdave95
Top achievements
Rank 2
answered on 21 Aug 2007, 06:14 PM
Hi

Thanks to all contributors this works great now.

Kind Regards

David
0
hkdave95
Top achievements
Rank 2
answered on 23 Aug 2007, 10:28 PM
Hi

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> 
and my css ...
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
0
Tsvetie
Telerik team
answered on 27 Aug 2007, 10:31 AM
Hello hkdave95,
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
0
hkdave95
Top achievements
Rank 2
answered on 29 Aug 2007, 07:50 PM
Hi

The problem seems to have magically fixed itself.

I think the css file was not being picked up correctly.

Kind Regards

David
Tags
Splitter
Asked by
hkdave95
Top achievements
Rank 2
Answers by
Tsvetie
Telerik team
hkdave95
Top achievements
Rank 2
Patrick Greene
Top achievements
Rank 1
Share this question
or