Height and width not being set to 100% of browser

13 posts, 0 answers
  1. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 19 Aug 2007 Link to this post

    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
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 20 Aug 2007 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 20 Aug 2007 Link to this post

    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
  5. Patrick Greene
    Patrick Greene avatar
    2 posts
    Member since:
    Aug 2007

    Posted 20 Aug 2007 Link to this post

    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.
  6. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 20 Aug 2007 Link to this post

    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
  7. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 20 Aug 2007 Link to this post

    Opps. Sorry Patrick for calling you Peter, better than calling you Paul.

    David
  8. Patrick Greene
    Patrick Greene avatar
    2 posts
    Member since:
    Aug 2007

    Posted 20 Aug 2007 Link to this post

    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>

  9. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 21 Aug 2007 Link to this post

    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
  10. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 21 Aug 2007 Link to this post

    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
  11. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 21 Aug 2007 Link to this post

    Hi

    Thanks to all contributors this works great now.

    Kind Regards

    David
  12. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 23 Aug 2007 Link to this post

    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
  13. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 27 Aug 2007 Link to this post

    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
  14. hkdave95
    hkdave95 avatar
    245 posts
    Member since:
    Nov 2006

    Posted 29 Aug 2007 Link to this post

    Hi

    The problem seems to have magically fixed itself.

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

    Kind Regards

    David
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017