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

RadMenu in RadDock - flyout causes scrollbars to appear

6 Answers 143 Views

Dock

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

Jason asked on 02 Jun 2008, 05:34 PM

I would like to put a vertically oriented RadMenu in a RadDock. When the menus are expanded, scrollbars appear in the dock instead of the menu's overlaying outside the dock. How can this be done without showing scrollbars?

Here is some sample code to reproduce the problem:

    <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
        <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="100px">
            <telerik:RadDock ID="RadDock1" runat="server" Width="100px">
                <ContentTemplate>
                    <telerik:RadMenu ID="RadMenu1" runat="server" Flow="vertical">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Item 1" />
                            <telerik:RadMenuItem runat="server" Text="Item 2" />
                            <telerik:RadMenuItem runat="server" Text="Item 3">
                                <Items>
                                    <telerik:RadMenuItem runat="server" Text="Item 3.1" />
                                    <telerik:RadMenuItem runat="server" Text="Item 3.2" />
                                    <telerik:RadMenuItem runat="server" Text="Item 3.3" />
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenu>
                </ContentTemplate>
            </telerik:RadDock>
        </telerik:RadDockZone>
    </telerik:RadDockLayout>

6 Answers, 1 is accepted

answered on 04 Jun 2008, 11:04 AM

Hello Jason,

Thank you for your feedback. We highly appreciate it.

The problem you observe is due to RadMenu being placed in a relatively positioned element such as the content of the RadDock.
If you want the Items of the menu to slide over the RadDock, you can use the suggestion below if the content of RadDock does not exceed its size:

    
            <style type="text/css">  
        
            .rdContent,.raddock,.raddockzone  
        
            {  
        
                overflow:visible !important;  
        
            }  
        
            </style>

Please, let us know if you need further assistance.

Best regards,
Sophy
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 05 Jun 2008, 08:36 AM

Hi Jason,

Please, find below our suggestion which works in FF as well:

    
            <html xmlns="http://www.w3.org/1999/xhtml">   
        
            <head runat="server">   
        
                <title>Untitled Page</title> 
        
               <style type="text/css">  
        
                .rdContent,.raddock, .raddockzone, .rdSideBorders  
        
                {  
        
                    overflow:visible !important;  
        
                }  
        
                </style> 
        
            </head> <body> 
        
            <form id="form1" runat="server">  
        
                <asp:scriptmanager id="ScriptManager1" runat="server">  
        
                </asp:scriptmanager> 
        
               <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
        
                    <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="300px" Width="100px">  
        
                        <telerik:RadDock ID="RadDock1" runat="server" Width="150px">  
        
                            <ContentTemplate> 
        
                                <telerik:RadMenu ID="RadMenu1" runat="server" Flow="vertical">  
        
                                    <Items> 
        
                                        <telerik:RadMenuItem runat="server" Text="Item 1" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="Item 2" /> 
        
                                        <telerik:RadMenuItem runat="server" Text="Item 3">  
        
                                            <Items> 
        
                                                <telerik:RadMenuItem runat="server" Text="Item 3.1" /> 
        
                                                <telerik:RadMenuItem runat="server" Text="Item 3.2" /> 
        
                                                <telerik:RadMenuItem runat="server" Text="Item 3.3" /> 
        
                                            </Items> 
        
                                        </telerik:RadMenuItem> 
        
                                    </Items> 
        
                                </telerik:RadMenu> 
        
                                <div style="clear: both"></div> 
        
                            </ContentTemplate> 
        
                        </telerik:RadDock> 
        
                    </telerik:RadDockZone> 
        
               </telerik:RadDockLayout> 
        
            </form> 
        
            </ body>   
        
            </ html>

If you experience any other problem, do contact us again.

Best wishes,
Sophy
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 11 Mar 2009, 03:13 PM

menuindock.zip

Hello John Horlock,

You need to change the z-index of the containing RadDock of the opened Menu to be higher than the z-index of the other RadDock.

Please see the attached page for a possible workaround.

Greetings,
Simon
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadMenu in RadDock - flyout causes scrollbars to appear

6 Answers, 1 is accepted