This is a migrated thread and some comments may be shown as answers.

Problem with RadPanelBar

1 Answer 126 Views

Dock

This is a migrated thread and some comments may be shown as answers.

Ivan asked on 24 Mar 2009, 05:13 PM

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

1 Answer, 1 is accepted

answered on 31 Mar 2009, 01:33 PM

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.