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:
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 Page .cs
The Default Page is Empty
Thanks
George
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
>
<
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
>
<
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