Can't get the Height:100% to work

6 posts, 2 answers
  1. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 12 Jun 2012 Link to this post

    Hello Team;
    I have tried all the recommendations for setting the proper Master Page in-line style:
    <style type="css">
        html, body, form
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>

    I have also copied the exact sample given in the help/demo and still the height 100% does not work.
    Here is the Master Page:
    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="DBO_Web.SiteMaster" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">
        <title>Document BackOffice</title>
        <meta name="keywords" content="Document, Management, Sharing, Storage, Publish, Search" />
        <meta name="description" content="Complete Document Publishing, Management, and Sharing system" />
        <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
        <link id="Link1" runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
        <link id="Link2" runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
        <style type="css">
            html, body, form
            {
                height: 100%;
                margin: 0px;
                padding: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
        <telerik:RadSkinManager ID="RadSkinManager" runat="server" Skin="Office2010Blue" />
        <telerik:RadScriptManager ID="RadScriptManager" runat="server" />
        <telerik:RadFormDecorator ID="RadFormDecorator" runat="server" />
     
        <div style="margin-right: 10px; margin-left: 10px; height:100%" >
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
     
        </form>
    </body>
    </html>

    and Here is the content page to hold your sample, but still in all three browser they show height of 500px
    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
        CodeBehind="Publish.aspx.cs" Inherits="DBO_Web.Views.Publisher.Publish" %>
     
    <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
         <div id="ParentDivElement" style="height: 100%;">
            <%--_________________________________________________________________________________________________--%>
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%"
                BackColor="#F4F9FE" VisibleDuringInit="False" Orientation="Horizontal">
     
     
                    <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"
                        Scrolling="none">
                        <!-- Place the content of the pane here -->
                    </telerik:RadPane>
     
                    <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />
                    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">
                        <telerik:RadSplitter ID="NestedSplitter" runat="server" LiveResize="true">
                            <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">
                                <!-- Place the content of the pane here -->
                            </telerik:RadPane>
                            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />
                            <telerik:RadPane ID="ContentPane" runat="server">
                                <!-- Place the content of the pane here -->
                            </telerik:RadPane>
                        </telerik:RadSplitter>
                    </telerik:RadPane>
             </telerik:RadSplitter>
            <%--_________________________________________________________________________________________________--%>
        </div>
    </asp:Content>

    Hope this helps to get this resolved. I'm using the latest 2012 Q2.
    Thank you in advance
  2. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 14 Jun 2012 Link to this post

    Any thoughts...?
    Thanks!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 18 Jun 2012 Link to this post

    Hi Ben,

    In the provided sample page the <style> declaration is incorrect and the tag is not rendered. This is causing the <html>, <form> and <body> element to not have set height. The correct declaration should be:
    <style type="text/css">

    After fixing this tags declaration the splitter should be correctly expanded to 100% height of the browser.

    Greetings,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 18 Jun 2012 Link to this post

    Ah, thank you, Yes! I don't know how that escape from me. :-)
    The only problem that I see now that the 100% is calculated based on the total size of height of the Browser window and not what is available to the "ConentPlaceHolder" from the MasterPage. Now with Height=100%, bottom of the splitter pane goes beyond the bottom of the window and gets cutoff. So, I have to set it to Height=85%. But the 85% height is a different height depending on the size of browser window.
    I even set a "margin-bottom: 30px" to raise the bottom, but still would not make a difference. Any suggestion?

    Thank you for catching  that.
    ..Ben
  6. Answer
    Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 19 Jun 2012 Link to this post

    Hi Ben,

    Please take a look at the following KB article, I believe it will help you solve this case:
    RadSplitter which is 100% of the page and has margin applied

    Regards,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Ben Hayat
    Ben Hayat avatar
    892 posts
    Member since:
    May 2008

    Posted 19 Jun 2012 Link to this post

    Thank you again. The HeightOffset solved the problem.
    Here is a screen shot, and if I change the browser size, it's dynamically re-sized.

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