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

Can't get the Height:100% to work

5 Answers 415 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Ben Hayat
Top achievements
Rank 2
Ben Hayat asked on 12 Jun 2012, 07:15 PM
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

5 Answers, 1 is accepted

Sort by
0
Ben Hayat
Top achievements
Rank 2
answered on 15 Jun 2012, 04:11 AM
Any thoughts...?
Thanks!
0
Accepted
Dobromir
Telerik team
answered on 18 Jun 2012, 06:34 AM
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.
0
Ben Hayat
Top achievements
Rank 2
answered on 18 Jun 2012, 12:52 PM
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
0
Accepted
Dobromir
Telerik team
answered on 19 Jun 2012, 02:46 PM
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.
0
Ben Hayat
Top achievements
Rank 2
answered on 19 Jun 2012, 03:39 PM
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
Tags
Splitter
Asked by
Ben Hayat
Top achievements
Rank 2
Answers by
Ben Hayat
Top achievements
Rank 2
Dobromir
Telerik team
Share this question
or