Problem with RadPanelBar

2 posts, 0 answers
  1. Ivan
    Ivan avatar
    19 posts
    Member since:
    Jan 2008

    Posted 24 Mar 2009 Link to this post

    Hi,
    I'm experiencing a problem with RadDock controls nested in RadPanelBar control. The problem is that if I want to limit the height of RadPanelBar, the nested RadDock controls appear outside the RadPanelItem in IE. In Firefox and Opera all works well. I searched the forum and found a topic that suggested using this css class ".slide{zoom:1}" but it didn't help. Here is a sample page:

    PanelBar.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="PanelBar.aspx.cs" Inherits="PanelBar" %> 
    <%@ 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"
        <title>Untitled Page</title> 
        <style type="text/css"
        /*.slide{zoom:1}*/ 
        </style> 
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
        <div> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server"
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Height="100px" ExpandMode="FullExpandedItem" EnableEmbeddedSkins="false"
                <Items> 
                    <telerik:RadPanelItem Expanded="true" Text="Docks" Value="Docks" Font-Bold="true" Font-Size="Medium" > 
                        <Items> 
                            <telerik:RadPanelItem> 
                                <ItemTemplate> 
                                    <div> 
                                        <telerik:RadDockZone ID="RadDockZone1" runat="server"
                                            <telerik:RadDock ID="RadDock1" runat="server"></telerik:RadDock> 
                                            <telerik:RadDock ID="RadDock2" runat="server"></telerik:RadDock> 
                                            <telerik:RadDock ID="RadDock3" runat="server"></telerik:RadDock> 
                                            <telerik:RadDock ID="RadDock4" runat="server"></telerik:RadDock> 
                                            <telerik:RadDock ID="RadDock5" runat="server"></telerik:RadDock> 
                                            <telerik:RadDock ID="RadDock6" runat="server"></telerik:RadDock> 
                                        </telerik:RadDockZone> 
                                    </div> 
                                </ItemTemplate> 
                            </telerik:RadPanelItem> 
                        </Items> 
                    </telerik:RadPanelItem> 
                </Items> 
            </telerik:RadPanelBar> 
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 
     

    I'll appreciate any help.
    Best regards,
    Ivan Pelovski
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 31 Mar 2009 Link to this post

    Hi Ivan,

    You should set position: relative; to the rpGroup css class, e.g.

    <%@ 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 id="Head1" runat="server">  
        <title>Untitled Page</title>  
        <style type="text/css"
        .rpGroup  
        { 
            position: relative; 
        } 
        </style> 
    </head>  
    <body>  
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
        <div>  
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server"  
            ExpandMode="FullExpandedItem" Height="100px" 
             EnableEmbeddedSkins="false">  
                <Items>  
                    <telerik:RadPanelItem Expanded="true" Text="Docks" Value="Docks"  
                    Font-Bold="true" Font-Size="Medium" >  
                        <Items>  
                            <telerik:RadPanelItem>  
                                <ItemTemplate>  
                                    
                                        <telerik:RadDockZone ID="RadDockZone1" runat="server">  
                                            <telerik:RadDock ID="RadDock1" runat="server"></telerik:RadDock>  
                                            <telerik:RadDock ID="RadDock2" runat="server"></telerik:RadDock>  
                                            <telerik:RadDock ID="RadDock3" runat="server"></telerik:RadDock>  
                                            <telerik:RadDock ID="RadDock4" runat="server"></telerik:RadDock>  
                                            <telerik:RadDock ID="RadDock5" runat="server"></telerik:RadDock>  
                                            <telerik:RadDock ID="RadDock6" runat="server"></telerik:RadDock>  
                                        </telerik:RadDockZone>  
                                    
                                </ItemTemplate>  
                            </telerik:RadPanelItem>  
                        </Items>  
                    </telerik:RadPanelItem>  
                </Items>  
            </telerik:RadPanelBar>  
            </telerik:RadDockLayout>  
        </div>  
        </form>  
    </body>  
    </html>  
      

    Let us know if you have any other questions.

    Regards,
    Petio Petkov
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
Back to Top