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

RadMenu's default z-index?

1 Answer 187 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Nick Wu
Top achievements
Rank 1
Nick Wu asked on 14 Apr 2010, 06:37 PM
in my webpage , I do not set  z-index to all elements.

but in IE6, RadMenu's Drop List is shown behind DIV. 

In IE8,  I use RadWindow  as Modal Dialog, but the Window can't override this Menu.

my page :(sorry,it's so long)

<!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">
    <style type="text/css">
        html, body
        {
            overflow: hidden;
            height: 100%;
            margin: 0;
            padding: 0;
            font: 13px Georgia, Arial, Simsun;
        }
        html
        {
            _padding: 92px 0;
        }
        #divPageHead
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: #EFF3FB;
        }
        #divPageMenu
        {
            position: absolute;
            top: 70px;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
        }
        #divPageFoot
        {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30px;
            background: #EFF3FB;
        }
        #divPageBody2
        {
            position: absolute;
            top: 140px;
            right: 0;
            bottom: 40px;
            left: 0;
            overflow: hidden;
            width: 100%;
            _height: 100%;
        }
        #divPageLeft2
        {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            overflow: auto;
            width: 240px;
            _height: 100%;
            background: #EFF3FB;
        }
        #divPageRight2
        {
            position: absolute;
            _position: static;
            top: 0;
            right: 0;
            bottom: 0;
            left: 250px;
            overflow: auto;
            _overflow: hidden;
            _height: 100%;
            _margin-left: 250px;
            background: #EFF3FB;
        }
        #divRightContent2
        {
            _overflow: auto;
            _width: 100%;
            _height: 100%;
        }
        #divPageBar2
        {
            position: absolute;
            top: 110px;
            left: 0;
            right: 0;
            height: 30px;
            width: 100%;
            overflow: hidden;
            z-index: 10;
        }
        #divPageLeftHd2
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 240px;
            height: 30px;
            background: #F00;
        }
        #divPageRightHd2
        {
            position: absolute;
            _position: static;
            top: 0;
            left: 250px;
            right: 0;
            height: 30px;
            _margin-left: 250px;
            background: #FF0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divPageHead">
        <div style="height: 70px">
            some text
        </div>
        <div id="divPageMenu">
            <telerik:RadMenu ID="mainMenu" runat="server" CausesValidation="False" EnableViewState="False"
                PersistLoadOnDemandItems="False">
            </telerik:RadMenu>
        </div>
    </div>
    <div id="divPageBar2">
        <div id="divPageLeftHd2">
        </div>
        <div id="divPageRightHd2">
        </div>
    </div>
    <div id="divPageBody2">
        <div id="divPageLeft2">
        </div>
        <div id="divPageRight2">
            <div id="divRightContent2">
            </div>
        </div>
    </div>
    <div id="divPageFoot">
        Copyright &copy;(2010)
    </div>
    </form>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Accepted
Peter
Telerik team
answered on 15 Apr 2010, 11:00 AM
Hello Nick Wu,

You need to set the z-index of RadMenu or its container to some large enough value. In addition to this, set position:relative for the element which wraps the menu. I suggest you review the following articles to get a better understanding of how the z-index property works:

http://blogs.telerik.com/atanaskorchev/posts/09-07-02/z-index_demystified.aspx

http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html


Best wishes,
Peter
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Menu
Asked by
Nick Wu
Top achievements
Rank 1
Answers by
Peter
Telerik team
Share this question
or