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

Can't get the Height:100% to work

5 Answers 539 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, 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.

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

answered on 19 Jun 2012, 03:39 PM

ss.jpg

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