Dock Layout positioning using IE6, IE7, FF3.x

4 posts, 0 answers
  1. Stefano
    Stefano avatar
    1 posts
    Member since:
    Apr 2009

    Posted 17 Apr 2009 Link to this post

    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:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs"%> 
    2  
    3 <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml" style="height:100%">  
    8 <head id="Head1" runat="server">  
    9     <title></title>  
    10     <telerik:RadStyleSheetManager runat="server" ID="RadStyleSheet1" /> 
    11 </head> 
    12 <body scroll="no" style="margin:0px;height:100%;overflow:hidden;" > 
    13     <form id="form1" runat="server" style="height:100%;margin:0px" > 
    14         <telerik:RadScriptManager ID="ScriptManager1" runat="server" EnableTheming="True">  
    15         </telerik:RadScriptManager> 
    16         <telerik:RadSplitter runat="Server" ID="MasterContainer" Width="100%" Height="100%" Orientation="Horizontal" 
    17         VisibleDuringInit="false" FullScreenMode="True" LiveResize="True">      
    18             <telerik:RadPane ID="topPane" runat="server" Height="89px" Scrolling="None">  
    19                 <div class="header" style="height:69px;width:100%;">  
    20                     <div class="logo" style="height:89px;width:100%;">  
    21                         Logo Zone (CSS)  
    22                     </div> 
    23                 </div> 
    24             </telerik:RadPane> 
    25               
    26             <telerik:RadSplitBar ID="RadSplitBar1" runat="server"  EnableResize="False" /> 
    27               
    28             <telerik:RadPane ID="ContainerPane" runat="server" Scrolling="None">  
    29                 <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Vertical">  
    30  
    31                     <telerik:RadPane runat="Server" ID="leftPane" Width="240px" MinWidth="120" MaxWidth="360">  
    32                         Menu Zone (collapse)  
    33                     </telerik:RadPane> 
    34  
    35                     <telerik:RadSplitBar runat="server" ID="MenuSplitBar" CollapseMode="Forward"/>  
    36                                           
    37                     <telerik:RadPane ID="RightPane" runat="server" BackColor="Yellow">  
    38                         <telerik:RadDockLayout ID="RadDockLayout1" runat="server" > 
    39                               
    40                             <telerik:RadDockZone ID="RadDockZone1" runat="server" FitDocks="true" Orientation="Vertical" height="98%" BackColor="White">  
    41                                   
    42                                 <telerik:RadDock ID="RadDock1" runat="server" EnableDrag="False" Height="580px" DefaultCommands="ExpandCollapse" BackColor="AntiqueWhite" DockMode="Docked" Width="650px">  
    43                                 <TitlebarTemplate>DOCK TITLE 1</TitlebarTemplate> 
    44                                     <ContentTemplate> 
    45                                         Dock Pane Data 1<br/> 
    46                                         Dock Pane Data 1<br/> 
    47                                         Dock Pane Data 1<br/> 
    48                                         Dock Pane Data 1<br/> 
    49                                         Dock Pane Data 1<br/> 
    50                                         Dock Pane Data 1<br/> 
    51                                         Dock Pane Data 1<br/> 
    52                                         Dock Pane Data 1<br/> 
    53                                         Dock Pane Data 1<br/> 
    54                                         Dock Pane Data 1<br/> 
    55                                         Dock Pane Data 1<br/> 
    56                                         Dock Pane Data 1<br/> 
    57                                         Dock Pane Data 1<br/> 
    58                                         Dock Pane Data 1<br/> 
    59                                         Dock Pane Data 1<br/> 
    60                                         Dock Pane Data 1<br/> 
    61                                         Dock Pane Data 1<br/> 
    62                                         Dock Pane Data 1<br/> 
    63                                         Dock Pane Data 1<br/> 
    64                                         Dock Pane Data 1<br/> 
    65                                         Dock Pane Data 1<br/> 
    66                                         Dock Pane Data 1<br/> 
    67                                         Dock Pane Data 1<br/> 
    68                                         Dock Pane Data 1<br/> 
    69                                         Dock Pane Data 1<br/> 
    70                                         Dock Pane Data 1<br/> 
    71                                         Dock Pane Data 1<br/> 
    72                                         Dock Pane Data 1<br/> 
    73                                         Dock Pane Data 1<br/> 
    74                                         Dock Pane Data 1<br/> 
    75                                         Dock Pane Data 1<br/> 
    76                                         Dock Pane Data 1<br/> 
    77                                         Dock Pane Data 1<br/> 
    78                                         Dock Pane Data 1<br/> 
    79                                         Dock Pane Data 1<br/> 
    80                                         Dock Pane Data 1<br/> 
    81                                         Dock Pane Data 1<br/> 
    82                                                                                   
    83                                     </ContentTemplate> 
    84                                 </telerik:RadDock>                              
    85  
    86                             </telerik:RadDockZone>                          
    87  
    88                         </telerik:RadDockLayout> 
    89                     </telerik:RadPane> 
    90                </telerik:RadSplitter> 
    91             </telerik:RadPane> 
    92                  
    93         </telerik:RadSplitter>      
    94     </form> 
    95 </body> 
    96 </html> 
    97  

    - 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 ?
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 21 Apr 2009 Link to this post

    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">

     

  3. Andrea Del Brocco
    Andrea Del Brocco avatar
    11 posts
    Member since:
    Jan 2003

    Posted 22 Apr 2009 Link to this post

    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.
  4. Martin
    Admin
    Martin avatar
    585 posts

    Posted 24 Apr 2009 Link to this post

    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.
Back to Top