We've been working with the Telerik controls for a while now, without all that much difficulty, but the Splitter really seems to not be working as desired. Our client, as most would, want their site to display at any resolution in IE6, and there will be multiple pages where the body content will surpass the normal screen bounds due to very large RadGrids.
Anyways, we have an expanding RadSplitter sandwiched between a header and a footer, with no scrolling for the actual RadPanes. So far, this set up has worked well until now. Testing the site in FF3 presents us with a nice layout that extends the height of the content which it should. Also, anytime we collapse or expand any Panelbars within the RadPane, the content page will expand or collapse, and the splitter, and thereby the window, will expand or shrink.
In IE6 however, the Splitter looks as though it calculates the correct height on INIT, but then shrinks to the same height on every page, regardless of how much content. Expanding or collapsing the Panelbars only reveals content in this small 'view'; it does not actually resize the RadPane at all.
I know there are inconsistencies between browsers, but juggling this large of a difference is a pain and very draining to diagnose. If there is a way to cancel that after Init resize, I imagine it would work.
<%-- |
$Date$ |
$Author$ |
$Revision$ |
(C)2008 CGI, Inc. |
THIS PROGRAM IS PROPRIETARY AND IS THE PROPERTY OF: CGI, INC |
COPYING OR USE OF THIS PROGRAM, EXCEPT AS SPECIFICALLY PROVIDED FOR IN A |
LICENSE AGREEMENT CONTROLLING SUCH USE, IS PROHIBITED. |
This program is designated as CONFIDENTIAL and is a trade secret under |
applicable laws. Unauthorized copying or disclosure is prohibited and is |
subject to criminal and civil penalties, including fines and imprisonment. |
--%> |
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="ReachMasterPage" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml" > |
<head runat="server" id="HeadMaster"> |
<title></title> |
<link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /> |
</head> |
<body> |
<form id="form1" runat="server" method="post"> |
<asp:ScriptManager ID="ScriptManager1" runat="server"> |
</asp:ScriptManager> |
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> |
</telerik:RadAjaxManager> |
<div id="master_page"> |
<div id="master_header_top"> |
<div id="master_icon"> |
<asp:Image ID="imgCgiLogo" runat="server" ImageUrl="~/Images/cgilogo.gif" /> |
</div> |
<div id="master_login" style="height: 22px"> |
<span style="font-size: 11pt; font-weight:bold; color: red; font-family: 'Times New Roman';">Welcome Paul!</span> <span style="font-size: 8pt; color: blue; font-family: 'Times New Roman'; text-decoration: underline">Logout</span> |
</div> |
<div id="master_header_right"> |
<asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="Breadcrumb" PathSeparator=" : " > |
<PathSeparatorStyle Font-Bold="True" ForeColor="#FFFFFF" /> |
<CurrentNodeStyle ForeColor="#FFFFFF" /> |
<NodeStyle Font-Bold="True" ForeColor="#FFFFFF" CssClass="Breadcrumb" /> |
<RootNodeStyle Font-Bold="True" ForeColor="#FFFFFF" CssClass="Breadcrumb" /> |
</asp:SiteMapPath> |
</div> |
</div> |
<div id="master_middle"> |
<telerik:RadSplitter id="RadSplitter1" runat="server" Height="100%" Width="1500px" VisibleDuringInit="false" ResizeMode="EndPane" ResizeWithParentPane="true" ResizeWithBrowserWindow="true" Skin="Office2007"> |
<telerik:RadPane id="Radpane1" runat="server" Width="22px" Scrolling="None" Height="800px"> |
<telerik:RadSlidingZone id="SlidingZone1" runat="server" width="22px" DockedPaneId="Nav" ExpandedPaneId="Nav" SlideDirection="Right"> |
<telerik:RadSlidingPane id="Nav" Height="800px" title="Navigation" runat="server" Width="173px" Scrolling="Both" CssClass="slideContainer"> |
<telerik:RadAjaxPanel ID="NavRadAjaxPanel" runat="server"> |
<div> |
<div style="float:right; padding-right:2px;"> |
<asp:LinkButton ID="lnkbtnExpandAll" runat="server" CssClass="TreeNodeLinkButton" OnClick="lnkbtnExpandAll_Click">Expand All</asp:LinkButton> |
<asp:LinkButton ID="lnkbtnCollapseAll" runat="server" CssClass="TreeNodeLinkButton" OnClick="lnkbtnCollapseAll_Click">Collapse All</asp:LinkButton> |
</div> |
<div style="clear:both; overflow:hidden;"> |
<telerik:RadTreeView ID="RadTreeView1" runat="server" DataSourceID="SiteMapDS" DataFieldID="Title" DataNavigateUrlField="Url" DataTextField="Title" SingleExpandPath="False" CssClass="TreeNode" Width="100%" style="white-space:normal;" BackColor="White" Font-Size="8pt" Skin="Outlook"> |
<CollapseAnimation Duration="100" Type="OutQuint" /> |
<ExpandAnimation Duration="100" /> |
</telerik:RadTreeView> |
</div> |
</div> |
</telerik:RadAjaxPanel> |
</telerik:RadSlidingPane> |
</telerik:RadSlidingZone> |
</telerik:RadPane> |
<telerik:RadSplitBar id="Radsplitbar3" runat="server" CollapseMode="Forward" /> |
<telerik:RadPane ID="MasterPageRadContentPane" runat="server" MinHeight="1000" MinWidth="800" Scrolling="None"> |
<div id="master_contenttitle"> |
<asp:Label ID="lblContentTitle" runat="server" Font-Bold="True" Font-Size="12pt"></asp:Label> |
</div> |
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> |
</asp:ContentPlaceHolder> |
</telerik:RadPane> |
</telerik:RadSplitter> |
</div> |
<div id="master_footer"> |
Copyright CGI 2008 |
</div> |
</div> |
<asp:SiteMapDataSource ID="SiteMapDS" runat="server" SiteMapProvider="REACHSiteMap" /> |
</form> |
</body> |
</html> |
Style Sheet
body, p, h1, h2, h3, h4, table |
{ |
font-size:10pt; |
font-family:Tahoma, Arial; |
margin:0; |
padding:0; |
border:none; |
} |
body |
{ |
/*background: #B4B4B4 url(images/body_bg.gif) repeat left top;*/ |
height:100%; |
width:100%; |
font-size:10pt; |
font-family:Arial; |
} |
#master_page |
{ |
height:100%; |
} |
/* Header Layout */ |
#master_header_top |
{ |
background-color: #110E93; |
width:100%; |
border-bottom:solid 1px Gray; |
} |
#master_header_left |
{ |
height:100%; |
width:250px; |
float:left; |
} |
#master_icon |
{ |
clear:both; |
width: 100%; |
height: 55px; |
background-color:White; |
} |
#master_header |
{ |
background-color: #C8D6E6; |
} |
#master_header_right |
{ |
padding-top: 3px; |
height: 22px; |
padding-bottom: 0px; |
} |
#master_header_right_top |
{ |
width:100%; |
height:55px; |
background-color:White; |
} |
#master_login |
{ |
background-color: #C8D6E6; |
padding-top:2px; |
padding-left:5px; |
width: 200px; |
height:22px; |
float:left; |
clear:both; |
} |
/* Middle Section Layout */ |
#master_middle |
{ |
} |
#master_menu |
{ |
/*float:left;*/ |
} |
.master_contentbody |
{ |
} |
#master_contenttitle |
{ |
width:70%; |
margin-left:10px; |
border-bottom: solid 2px #888888; |
} |
/* Footer */ |
#master_footer |
{ |
background-color: #110E93; |
font-size:8pt; |
width:100%; |
height:18px; |
padding-top:2px; |
padding-left:45%; |
clear:both; |
color:White; |
} |
/* Tree style RadGrid styles */ |
.OutlookTopBar |
{ |
background-color: white; |
background-repeat: repeat-x; |
padding-top: 3px; |
border: 1px solid #002D96; |
width: 180px; |
font-size: 11px; |
padding-left: 4px; |
} |
.TreeviewGrid Table |
{ |
margin-top: 7px; |
border:0px; |
} |
.TreeviewGrid a |
{ |
color: #000000; |
text-decoration: underline; |
} |
.TreeviewGrid td |
{ |
font-size: 11px; |
border:0px; |
} |
.SelectedFolder |
{ |
font-weight: bold; |
} |
.OutlookTable |
{ |
background-color:#c4dafa; |
margin-top:4px; |
} |
.MailSubject |
{ |
color: #808080; |
} |
.SelectedRow_Outlook .MailSubject |
{ |
color: white; |
} |
/* Styles for the Treeview on the master page */ |
.TreeMenu |
{ |
font-family:Arial; |
background-color:White; |
color:#678CB9; |
width:210px; |
} |
.TreeNodeLinkButton |
{ |
color:#15428B; |
text-decoration:none; |
font-size:7pt; |
} |
.TreeNode |
{ |
color:#15428b; |
} |
.TreeNode a |
{ |
color:#15428b; |
background-color:White; |
} |
.TreeNode a:visited |
{ |
color:#15428b; |
background-color:White; |
} |
.TreeNode a:hover |
{ |
text-decoration:none; |
color:Red; |
background-color:White; |
} |
.TreeNode a:active |
{ |
color:Red; |
background-color:White; |
} |
.slideContainer { |
border:0px solid #073b96; |
border-collapse:collapse; |
background-color:White; |
} |
#master_content |
{ |
width:100%; |
height:80%; |
float:left; |
clear:both; |
margin-left:10px; |
} |
.master_menu |
{ |
} |
div.menuTables |
{ |
font-size:10pt; |
font-family:Arial; |
font-weight:bold; |
} |
table.menuTables |
{ |
margin-left:20px; |
margin-top:20px; |
border:0; |
} |
table.menuTables td |
{ |
width:615px; |
} |
table.useHeaderMenu |
{ |
margin-left:10px; |
} |
table.useHeaderMenu td |
{ |
vertical-align:top; |
font-size:7pt; |
} |
table.useHeaderMenu a |
{ |
text-decoration:none; |
} |
table.formFields |
{ |
} |
.collapsible |
{ |
font-size:8pt; |
font-family:Arial; |
vertical-align:middle; |
margin-top:10px; |
margin-left:10px; |
margin-bottom:10px; |
margin-right:10px; |
whitewhite-space: normal !important; |
} |
.collapsible img.handle |
{ |
text-align:rightright; |
MARGIN-TOP: 5px; |
margin-right:20px; |
margin-left:300px; |
position:relative; |
} |
.invisible |
{ |
display:none; |
visibility:hidden; |
} |
.visible |
{ |
visibility:visible; |
} |
.TabStrip |
{ |
border:solid 1px Gray; |
} |
.PageView |
{ |
vertical-align:middle; |
padding-top:10px; |
margin-left:10px; |
margin-bottom:10px; |
margin-right:10px; |
whitewhite-space: normal !important; |
} |
.Breadcrumb |
{ |
font:bold 11px Arial, Verdana, Sans-serif; |
padding-left: 5px; |
margin-top: 2px; |
} |
.Breadcrumb a |
{ |
text-decoration:none; |
} |
.Breadcrumb a:hover |
{ |
text-decoration:underline; |
} |
ThresholdLabel |
{ |
font-weight:bold; |
} |
Very discouraging. But hopefully, with your knowledge and my cooperation, we can figure this out.
Thanks a lot.