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

Can't get the Height:100% to work

5 Answers 459 Views

Splitter

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

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">

</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">

</telerik:RadPane>

<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="ContentPane" runat="server">

</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

Accepted

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

Accepted