Hi, we have just purchased the RadControls for ASP.NET AJAX and having trouble with our first attempt to making a working layout.
We are using Q1 2009 to develope the restyle of an old application, with an huge number of customers and needs to make a classic 3 pane layout: top header, left menu and a big content (the main one) pane.
We are planning to use a dock layout on the 'main' pane to make docked 'windows' with input controls inside. Our customers use IE6 and IE7 platform.
This is our first try:
- at row num 40 we set height="98%" to make a dockzone that cover the main pane entirely, (100% was not usable because an extra vertical scrollbar appears). With the 98% height this code seems to work, but reducing the browser height (resizing the browser window) to a value < of radDock height (in this example 580px) the dockZone vertical scrollbar should appear.. but this does not happens in IE6, in IE7 an horizontal extra scrollbar appears (seems that the vertical scroller is builded outside the dockzone, without resizing the zone itself), in FF3, magically all works fine!!!! (but our application MUST works into IE6 and IE7)
Some ideas ?
We are using Q1 2009 to develope the restyle of an old application, with an huge number of customers and needs to make a classic 3 pane layout: top header, left menu and a big content (the main one) pane.
We are planning to use a dock layout on the 'main' pane to make docked 'windows' with input controls inside. Our customers use IE6 and IE7 platform.
This is our first try:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs"%> | |
<%@ 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" style="height:100%"> | |
<head id="Head1" runat="server"> | |
<title></title> | |
<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheet1" /> | |
</head> | |
<body scroll="no" style="margin:0px;height:100%;overflow:hidden;" > | |
<form id="form1" runat="server" style="height:100%;margin:0px" > | |
<telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True"> | |
</telerik:RadScriptManager> | |
<telerik:RadSplitter runat="Server" ID="MasterContainer" Width="100%" Height="100%" Orientation="Horizontal" | |
VisibleDuringInit="false" FullScreenMode="True" LiveResize="True"> | |
<telerik:RadPane ID="topPane" runat="server" Height="89px" Scrolling="None"> | |
<div class="header" style="height:69px;width:100%;"> | |
<div class="logo" style="height:89px;width:100%;"> | |
Logo Zone (CSS) | |
</div> | |
</div> | |
</telerik:RadPane> | |
<telerik:RadSplitBar ID="RadSplitBar1" runat="server" EnableResize="False" /> | |
<telerik:RadPane ID="ContainerPane" runat="server" Scrolling="None"> | |
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical"> | |
<telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="120" MaxWidth="360"> | |
Menu Zone (collapse) | |
</telerik:RadPane> | |
<telerik:RadSplitBar runat="server" ID="MenuSplitBar" CollapseMode="Forward"/> | |
<telerik:RadPane ID="RightPane" runat="server" BackColor="Yellow"> | |
<telerik:RadDockLayout ID="RadDockLayout1" runat="server" > | |
<telerik:RadDockZone ID="RadDockZone1" runat="server" FitDocks="true" Orientation="Vertical" height="98%" BackColor="White"> | |
<telerik:RadDock ID="RadDock1" runat="server" EnableDrag="False" Height="580px" DefaultCommands="ExpandCollapse" BackColor="AntiqueWhite" DockMode="Docked" Width="650px"> | |
<TitlebarTemplate>DOCK TITLE 1</TitlebarTemplate> | |
<ContentTemplate> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
Dock Pane Data 1<br/> | |
</ContentTemplate> | |
</telerik:RadDock> | |
</telerik:RadDockZone> | |
</telerik:RadDockLayout> | |
</telerik:RadPane> | |
</telerik:RadSplitter> | |
</telerik:RadPane> | |
</telerik:RadSplitter> | |
</form> | |
</body> | |
</html> | |
- at row num 40 we set height="98%" to make a dockzone that cover the main pane entirely, (100% was not usable because an extra vertical scrollbar appears). With the 98% height this code seems to work, but reducing the browser height (resizing the browser window) to a value < of radDock height (in this example 580px) the dockZone vertical scrollbar should appear.. but this does not happens in IE6, in IE7 an horizontal extra scrollbar appears (seems that the vertical scroller is builded outside the dockzone, without resizing the zone itself), in FF3, magically all works fine!!!! (but our application MUST works into IE6 and IE7)
Some ideas ?