Z-index issue with multiple menus

3 posts, 0 answers
  1. Matthew Botting
    Matthew Botting avatar
    41 posts
    Member since:
    Apr 2005

    Posted 10 Sep 2013 Link to this post

    Hi Telerik,
    We have a site menu containing subitems in our master page so it displays on all pages.
    One quite a few pages we also use a 1 level horizontal menu to perform actions.

    Since upgrading to 2013.2.717.40 we have been experiencing z-index issues where the child items of the top menu sit below the root level items of the second menu (see screenshot).

    I have tried to override the .css particularly of rmSlide but have not found a solution.

    Below is some sample code used to create the issue shown in the screenshot.

    Do you have any suggestions?

    Thanks,
    Matt
    <telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" EnableEmbeddedSkins="true" Skin="Default">
     
        <Items>
     
            <telerik:RadMenuItem Text="File" AccessKey="F">
     
                <Items>
     
                    <telerik:RadMenuItem Text="New" AccessKey="w" />
     
                    <telerik:RadMenuItem Text="Open" AccessKey="O" />
     
                    <telerik:RadMenuItem IsSeparator="True" />
     
                    <telerik:RadMenuItem Text="Save" AccessKey="S" />
     
                    <telerik:RadMenuItem Text="Save As" AccessKey="A" />
     
                    <telerik:RadMenuItem IsSeparator="True" />
     
                    <telerik:RadMenuItem Text="Print Preview"
                        AccessKey="V" />
     
                    <telerik:RadMenuItem Text="Print" AccessKey="P" />
     
                    <telerik:RadMenuItem IsSeparator="True" />
     
                    <telerik:RadMenuItem Text="Close" AccessKey="C" />
     
                </Items>
     
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Edit" AccessKey="E">
     
                <Items>
     
                    <telerik:RadMenuItem Text="Undo" AccessKey="U" />
     
                    <telerik:RadMenuItem IsSeparator="True" />
     
                    <telerik:RadMenuItem Text="Cut" AccessKey="T" />
     
                    <telerik:RadMenuItem Text="Copy" AccessKey="C" />
     
                    <telerik:RadMenuItem Text="Paste" AccessKey="P" />
     
                    <telerik:RadMenuItem Text="Clipboard..."
                        AccessKey="b" />
     
                    <telerik:RadMenuItem IsSeparator="True" />
     
                </Items>
     
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Insert" AccessKey="I">
     
                <Items>
     
                    <telerik:RadMenuItem Text="Break..." AccessKey="B" />
     
                    <telerik:RadMenuItem Text="Page Numbers..." AccessKey="U" />
     
                    <telerik:RadMenuItem Text="Date and Time..." AccessKey="T" />
     
                    <telerik:RadMenuItem Text="Field..." AccessKey="F" />
     
                    <telerik:RadMenuItem Text="Symbol..." AccessKey="S" />
     
                    <telerik:RadMenuItem Text="Comment" AccessKey="M" />
     
                    <telerik:RadMenuItem IsSeparator="True" />
     
                    <telerik:RadMenuItem Text="Picture" AccessKey="P" />
     
                    <telerik:RadMenuItem Text="Diagram" AccessKey="G" />
     
                    <telerik:RadMenuItem Text="Text Box" AccessKey="X" />
     
                    <telerik:RadMenuItem Text="Hyperlink" AccessKey="I" />
     
                </Items>
     
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Format" AccessKey="O">
     
                <Items>
     
                    <telerik:RadMenuItem Text="Font" GroupSettings-Height="200">
     
                        <Items>
     
                            <telerik:RadMenuItem Text="Arial" />
     
                            <telerik:RadMenuItem Text="Verdana" />
     
                            <telerik:RadMenuItem Text="Tahoma" />
     
                            <telerik:RadMenuItem Text="Sans-serif" />
     
                            <telerik:RadMenuItem IsSeparator="true" />
     
                            <telerik:RadMenuItem Text="Arial" />
     
                            <telerik:RadMenuItem Text="Arial Black" />
     
                            <telerik:RadMenuItem Text="Arial Narrow" />
     
                            <telerik:RadMenuItem Text="Arial Unicode MS" />
     
                            <telerik:RadMenuItem Text="Bookman Old Style" />
     
                            <telerik:RadMenuItem Text="Bookshelf Symbol 7" />
     
                            <telerik:RadMenuItem Text="Century" />
     
                            <telerik:RadMenuItem Text="Century Gothic" />
     
                            <telerik:RadMenuItem Text="Comic Sans MS" />
     
                            <telerik:RadMenuItem Text="Courier New" />
     
                            <telerik:RadMenuItem Text="Garamond" />
     
                            <telerik:RadMenuItem Text="Georgia" />
     
                            <telerik:RadMenuItem Text="Goudy Old Style" />
     
                            <telerik:RadMenuItem Text="Goudy Stout" />
     
                            <telerik:RadMenuItem Text="Haettenschweiler" />
     
                            <telerik:RadMenuItem Text="Helvetica" />
     
                            <telerik:RadMenuItem Text="Impact" />
     
                            <telerik:RadMenuItem Text="Imprint MT Shadow" />
     
                            <telerik:RadMenuItem Text="Latha" />
     
                            <telerik:RadMenuItem Text="Lucida Console" />
     
                            <telerik:RadMenuItem Text="Lucida Sans" />
     
                            <telerik:RadMenuItem Text="Lucida Sans Typewriter" />
     
                            <telerik:RadMenuItem Text="Lucida Sans Unicode" />
     
                        </Items>
     
                    </telerik:RadMenuItem>
     
                    <telerik:RadMenuItem Text="Paragraph..." AccessKey="P" />
     
                    <telerik:RadMenuItem Text="Bullets and Numbering..." AccessKey="N" />
     
                    <telerik:RadMenuItem Text="Borders and Shading..." AccessKey="B" />
     
                    <telerik:RadMenuItem IsSeparator="true" />
     
                    <telerik:RadMenuItem Text="Columns" AccessKey="C" />
     
                    <telerik:RadMenuItem Text="Tabs" AccessKey="T" />
     
                    <telerik:RadMenuItem Text="Change Case" AccessKey="E" />
     
                    <telerik:RadMenuItem IsSeparator="true" />
     
                    <telerik:RadMenuItem Text="Background" AccessKey="g">
     
                        <Items>
     
                            <telerik:RadMenuItem>
     
                                <ItemTemplate>
     
                                    <div style="padding: 20px 0 20px 20px;">
     
                                        <telerik:RadColorPicker runat="server" ID="RadColorPicker1" Preset="Metro" ShowEmptyColor="false"
                                            Width="200px" SelectedColor="#000000" />
     
                                    </div>
     
                                </ItemTemplate>
     
                            </telerik:RadMenuItem>
     
                            <telerik:RadMenuItem IsSeparator="True" />
     
                            <telerik:RadMenuItem Text="More Colors..." AccessKey="M" />
     
                            <telerik:RadMenuItem Text="Fill Efects..." AccessKey="F" />
     
                            <telerik:RadMenuItem Text="Printed Watermark..."
                                AccessKey="W" />
     
                        </Items>
     
                    </telerik:RadMenuItem>
     
                    <telerik:RadMenuItem Text="Theme" AccessKey="H" />
     
                    <telerik:RadMenuItem Text="Frames" AccessKey="R" />
     
                    <telerik:RadMenuItem Text="Autoformat" AccessKey="A" />
     
                </Items>
     
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="View" AccessKey="V">
     
                <Items>
     
                    <telerik:RadMenuItem Text="Normal" AccessKey="N" />
     
                    <telerik:RadMenuItem Text="Web Layout" AccessKey="W" />
     
                    <telerik:RadMenuItem Text="Print Layout" AccessKey="P" />
     
                    <telerik:RadMenuItem IsSeparator="True" />
     
                    <telerik:RadMenuItem Text="Task Pane" AccessKey="p" />
     
                </Items>
     
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Tools" AccessKey="T">
     
                <Items>
     
                    <telerik:RadMenuItem Text="Spelling And Grammar..." AccessKey="S" />
     
                    <telerik:RadMenuItem Text="Research..." AccessKey="R" />
     
                    <telerik:RadMenuItem Text="Language" AccessKey="L" />
     
                    <telerik:RadMenuItem Text="Word Count..." AccessKey="W" />
     
                    <telerik:RadMenuItem IsSeparator="True" />
     
                    <telerik:RadMenuItem Text="Track Changes" AccessKey="T" />
     
                    <telerik:RadMenuItem Text="Compare And Merge Documents.." AccessKey="D" />
     
                </Items>
     
            </telerik:RadMenuItem>
     
        </Items>
     
    </telerik:RadMenu>
     
    <br />
    <br />
    <br />
    <telerik:RadMenu ID="RadMenu2" runat="server" EnableRoundedCorners="true" EnableShadows="true" EnableEmbeddedSkins="true" Skin="Default">
     
        <Items>
     
            <telerik:RadMenuItem Text="Item1" AccessKey="1">
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Item2" AccessKey="2">
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Item3" AccessKey="3">
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Item4" AccessKey="4">
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Item5" AccessKey="5">
            </telerik:RadMenuItem>
     
            <telerik:RadMenuItem Text="Item6" AccessKey="6">
            </telerik:RadMenuItem>
     
        </Items>
     
    </telerik:RadMenu>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Sep 2013 Link to this post

    Hi Matthew Botting,

    Please set the following CSS for the second RadMenu.

    ASPX:
    <telerik:RadMenu ID="RadMenu2" runat="server" EnableRoundedCorners="true" EnableShadows="true"
        EnableEmbeddedSkins="true" Skin="Default" CssClass="Radmenu2">
        <Items>
            <telerik:RadMenuItem Text="Item1" AccessKey="1">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item2" AccessKey="2">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item3" AccessKey="3">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item4" AccessKey="4">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item5" AccessKey="5">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="Item6" AccessKey="6">
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    CSS:
    <style type="text/css">
        .Radmenu2
        {
            z-index: 6000 !important;
        }
    </style>

    Thanks,
    Princy.


  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matthew Botting
    Matthew Botting avatar
    41 posts
    Member since:
    Apr 2005

    Posted 11 Sep 2013 Link to this post

    Thanks Princy,
    this does appear to do the trick.
    I am still interested however if we can apply a style to just the dropdown component as this would not require us to manually apply cssclass attributes on the affected radmenus.

    Strangely enough it used to work prior to upgrading to the latest release. I see this as a breaking change, obviously Telerik have altered something with the z-indexes in this release. I have also encountered zIndex issues with modal radWindows in this release.

    Matt
Back to Top