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

RadSplitter Height 100% is not working as expected

1 Answer 263 Views

Splitter

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

Itl asked on 26 Apr 2011, 12:14 PM

bad-100.jpg

good-100.jpg

Hi,
I am experiencing problem with RadSplitter by setting height to 100%
To demonstrate the issue, I created a simple project - but I can not include a zip file here!

Some times the height is ok, but generally after pressing F5 (refresh), it takes a wrong size. In my production project i getting wrong size always.
I analyzed html and find that when splitter have a wrong size, it has the following inlize css style:

<div id="ctl00_MainSplitter" style="width: 1210px; height: 400px;" control="[object Object]">

I tried to use all kinds of tricks, but it not working for me, can somebody help me with this issue?

Here Master Page Code:

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="TreePartMaster.Master.cs" Inherits="Intel.Diamond.Web.TreePartMaster" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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 id="masterHead" runat="server">

<meta http-equiv="X-UA-Compatible" content="IE=8" />

<title>Diamond System</title>

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

<telerik:RadStyleSheetManager ID="masterRadStyleSheetManager" runat="server" CdnSettings-TelerikCdn="Auto" ClientIDMode="Inherit" />

<script type="text/javascript">

function OnBodyStart() {

//Calculate Width and Height

var myWidth = 0, myHeight = 0;

if (typeof (window.innerWidth) == 'number') {

//Non-IE

myWidth = window.innerWidth;

myHeight = window.innerHeight;

} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {

//IE 6+ in 'standards compliant mode'

myWidth = document.documentElement.clientWidth;

myHeight = document.documentElement.clientHeight;

} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {

//IE 4 compatible

myWidth = document.body.clientWidth;

myHeight = document.body.clientHeight;

}

//Update style vars with new width and height

var b, p, m;

b = parseInt(myHeight * 0.95) + "px";

p = parseInt(myHeight * 0.97) + "px";

m = parseInt(myHeight * 0.87) + "px";

changecss(".body", "height", b);

changecss(".page", "height", p);

changecss(".main", "height", m);

// var ScreenWidth = document.forms[0].item("_ScreenWidth");

// var ScreenHeight = document.forms[0].item("_ScreenHeight");

//

// ScreenWidth.value = document.documentElement.clientWidth

// ScreenHeight.value = document.documentElement.clientHeight;

};

function changecss(theClass, element, value) {

var cssRules;

var added = false;

for (var S = 0; S < document.styleSheets.length; S++) {

if (document.styleSheets[S]['rules']) {

cssRules = 'rules';

} else if (document.styleSheets[S]['cssRules']) {

cssRules = 'cssRules';

} else {

//no rules found... browser unknown

}

for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {

if (document.styleSheets[S][cssRules][R].selectorText == theClass) {

if (document.styleSheets[S][cssRules][R].style[element]) {

document.styleSheets[S][cssRules][R].style[element] = value;

added = true;

break;

}

if (!added) {

try {

document.styleSheets[S].insertRule(theClass + ' { ' + element + ': ' + value + '; }', document.styleSheets[S][cssRules].length);

} catch (err) {

try { document.styleSheets[S].addRule(theClass, element + ': ' + value + ';'); } catch (err) {

}

};

</script>

<asp:ContentPlaceHolder ID="HeadContent" runat="server">

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<style type="text/css">

.RadPaneLocationFix

{

position: relative;

}

</style>

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

#updatePnl

{

height: 100% !important;

}

</style>

</telerik:RadCodeBlock>

</asp:ContentPlaceHolder>

</head>

<body class="body" onload="OnBodyStart();">

<form id="masterForm" runat="server">

<telerik:RadScriptManager ID="masterRadScriptManager" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadFormDecorator runat="server" ID="LabFormDecorator" DecoratedControls="All"

Skin="WebBlue" />

<telerik:RadAjaxManager ID="masterRadAjaxManager" runat="server" DefaultLoadingPanelID="AjaxDefaultLoadingPanel">

</telerik:RadAjaxManager>

<div class="page">

<div class="header">

<div class="title">

<table id="tbHeaderLayout">

<tr>

<td style="vertical-align: top;">

<asp:Image ID="DiamondLogo" runat="server" ImageUrl="~/Images/DmSystemLogo.gif" Height="40px"

BorderStyle="None" />

</td>

<td style="vertical-align: top;">

<label style="color: White; font-size: 30px">

ThThe Diamond System

</label>

</td>

</table>

</div>

<div class="loginDisplay">

</div>

<div class="main">

<asp:UpdatePanel runat="server" ID="updatePnl" style="height:100%;">

<ContentTemplate>

<telerik:RadSplitter ID="MainSplitter" runat="server" Width="100%"

Height="100%" BackColor="#66CCFF">

<telerik:RadPane ID="SideSplitterPane" runat="server" Width="15%">

<telerik:RadSlidingZone ID="MainSlidingZone" runat="server" DockedPaneId="SideBarSlidingPane"

Width="22px">

<telerik:RadSlidingPane ID="SideBarSlidingPane" runat="server" Title="Side Menu">

<telerik:RadPanelBar ID="SideBarMenu" runat="server" Width="100%" Height="100%">

<Items>

<telerik:RadPanelItem runat="server" NavigateUrl="~/Views/Segments.aspx" PreventCollapse="True"

Text="Main Page">

<Items>

<telerik:RadPanelItem runat="server" NavigateUrl="~/Views/Monitor/LabInfo.aspx" Text="Lab Monitor">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" PreventCollapse="True" Text="Project Progress Views">

<Items>

<telerik:RadPanelItem runat="server" NavigateUrl="~/Views/Tasks/TasksList.aspx" Text="Assignments">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" NavigateUrl="~/Views/Tasks/CreateNewTask.aspx"

Text="Create New Assignments">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" NavigateUrl="~/Views/Tasks/DataManagement.aspx"

Text="Data Management">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" PreventCollapse="True" Text="Administration Tasks">

<Items>

<telerik:RadPanelItem runat="server" NavigateUrl="~/Views/Management/Users.aspx"

Text="Users Management">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" NavigateUrl="~/Views/Management/Segments.aspx"

Text="Segments Management">

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" NavigateUrl="~/Views/Management/Workstations.aspx"

Text="Workstations Management">

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadPane ID="BodySplitterPane" runat="server" Width="85%" CssClass="RadPaneLocationFix">

<asp:ContentPlaceHolder ID="MainContent" runat="server" />

</telerik:RadPane>

</telerik:RadSplitter>

</ContentTemplate>

</asp:UpdatePanel>

</div>

<div class="clear">

<telerik:RadAjaxLoadingPanel ID="AjaxDefaultLoadingPanel" runat="server" Width="100%"

Height="100%" HorizontalAlign="Center">

</telerik:RadAjaxLoadingPanel>

</div>

<input type="hidden" name="_ScreenWidth" id="_ScreenWidth" runat="server" value="1024" />

<input type="hidden" name="_ScreenHeight" id="_ScreenHeight" runat="server" value="640" />

</form>

</body>

</html>

Master Page .cs

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.Security;

using Telerik.Web.UI;

namespace Intel.Diamond.Web

{

public partial class TreePartMaster : System.Web.UI.MasterPage

{

protected void Page_Load( object sender, EventArgs e )

{

try

{

do

{

if (!Page.IsPostBack)

{

//SetUpSideBarMenu();

}

SetUpSideBarMenu();

} while (false);

}

catch (Exception ex)

{

string msg = ex.Message;

}

private void SetUpSideBarMenu()

{

//MainSplitter.Width = new Unit( ScreenWidth * 0.95, UnitType.Pixel );

//MainSplitter.Height = new Unit( ScreenHeight * 0.91, UnitType.Pixel );

//SideBarSlidingPane.Width = new Unit( ScreenWidth * 0.15, UnitType.Pixel );

//SideBarSlidingPane.Height = new Unit( ScreenHeight * 0.90, UnitType.Pixel );

//SideBarMenu.Width = new Unit( ScreenWidth * 0.15, UnitType.Pixel );

SideBarMenu.Items[0].Enabled = true;

SideBarMenu.Items[1].Enabled = true;

SideBarMenu.Items[2].Enabled = true;

SideBarMenu.Items[0].Expanded = true;

SideBarMenu.Items[1].Expanded = true;

SideBarMenu.Items[2].Expanded = true;

}

The Default Page is Empty

<%@ Page Title="" Language="C#" MasterPageFile="~/TreePartMaster.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TesterWebApp.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

</asp:Content>

Thanks
George

1 Answer, 1 is accepted

answered on 27 Apr 2011, 03:40 PM

Hi George,

In the provided MasterPAge markup I noticed that you are setting the height of the RadSplitter's parent <div> (<div class="main">) during the <body>'s onload event. This event is fired when the page is fully loaded (including images, etc), while RadSplitter size is calculated before that.

I would recommend you to use jQuery's $(document).ready() method to execute function setting size to the RadSplitter parent elements, e.g.:

<script type="text/javascript">

$telerik.$(document).ready(OnBodyStart)

</script>

If this does not solve the issue, could you please open a formal support ticket and attach a sample project reproducing the problem so we can examine and debug it locally?

Regards,
Dobromir
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.