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 ?
3 Answers, 1 is accepted
0
Obi-Wan Kenobi
Top achievements
Rank 1
Rank 1
answered on 21 Apr 2009, 02:47 PM
RadDockZone and RadDock are rendered on the client as a DIVs. My suggestion is to set overflow-x:hidden to the RadDockZone and everything should be fine, e.g.
<telerik:RadDockZone ID="RadDockZone1" runat="server" FitDocks="true" Orientation="Vertical" style="overflow-x:hidden"
Height="98%" BackColor="White">
0
Andrea Del Brocco
Top achievements
Rank 1
Rank 1
answered on 22 Apr 2009, 01:45 PM
I'm sorry, this does'nt work.
This problem is visible in this sample, too: http://demos.telerik.com/aspnet-ajax/dock/examples/zoneorientation/defaultcs.aspx
using IE6 the vertical scrollbar is rendered outside the dockzone, with IE7 is rendered inside the zone and, naturally, an horizontal scrollbar appears.
There is a way to obtain the same behaviour in IE6 and IE7 ? Our customers use both.
This problem is visible in this sample, too: http://demos.telerik.com/aspnet-ajax/dock/examples/zoneorientation/defaultcs.aspx
using IE6 the vertical scrollbar is rendered outside the dockzone, with IE7 is rendered inside the zone and, naturally, an horizontal scrollbar appears.
There is a way to obtain the same behaviour in IE6 and IE7 ? Our customers use both.
0
Hi Andrea Del Brocco,
Please, try the following fix for IE7. It should work:
<style type="text/css">
*+html div.RadDockZone.rdVertical
{
overflow-x: hidden;
}
</style>
Have a great weekend,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Please, try the following fix for IE7. It should work:
<style type="text/css">
*+html div.RadDockZone.rdVertical
{
overflow-x: hidden;
}
</style>
Have a great weekend,
Martin Ivanov
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.