Menu opens behind RadSchedular no matter what z-index I use?

[Dave]

I have a menu on a master page and a schedular in a placeholder on one of my pages.  Using Q3, forest theme.

The menu works fine on every page except this one where it opens behind the RadSchedular.   I have attempted to bump the z-index of the menu up to as high as 99999, and attempted to lower the z-index of the RadSchedular as low as 50 by adding style="z-index:####" to the controls.

What should I try next?   Been banging my head against the wall for a couple hours now... (ouch!).

[Paul]

Hello Dave,

We tried to reproduce the reported issue using the latest version of the control, but to no avail. It will be best if you can open a support ticket and send us a simple running project (incl. your custom skin, CSS, images, DB backup if needed and so on) demonstrating the problem (and step-by-step instructions on doing so). In that way we can reproduce and pinpoint the problems you're facing on our side, understand the logic of your application and provide a solution.

Thanks,
Paul
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.

[Matthew Bishop]

Not sure if this is a new function or not Dave, or if you have fixed the problem but....

is the enable overlay set to true?
eg.

<

 

telerik:RadMenu ID="RadMenu1" runat="server" EnableOverlay="True">

 

 

 

 

[Dave]

The "enableoverlay" option didn't work.  What I ultimately found is that my menu was living inside of a <div> for style/background purposes, and for some reason I had to give the <div> itself a very high z-index and then the menu started to display properly over the RadSchedular.   The funny thing is that there was not any problem with it displaying over any other component from RadControls - it was only the RadSchedular.   Also it was an IE only issue, it worked fine in FireFox without this adjustement.  It also occurs with other themes not just Forest.

Whatever causes this behavior still exists in the Q1 2009 components.   But at least I have worked around it.

[-DJ-]

Hi guys,

I'm dealing with a similar problem, only that it's vice versa. The menu works in IE only. In FF for example the subitems are displayed "behind the page".

I've tried z-indexing just about every item remotely related to the menu itself and the div it's in.
You can see it in action here
I switched to Telerik Skin to see if the problem was my custom skin css file.

Now, a little venting:
It's starting to worry me how often using Telerik controls is slowing me down these days rather than speeding up my work. When you start to consider just switching to something like any of these menus: http://www.dynamicdrive.com/dynamicindex1/indexc.html because you actually believe it might be simpler dealing with them, then something is rotten in Denmark.

And I could go on nitpicking all day. Why is the property called EnableOverlay, and not just Overlay like the same property for RadWindow?

Regards,
-DJ-

[Atanas Korchev]

Hi -DJ-,

What do you mean by saying that RadMenu displays behind the page? Is this some other control? By the way you can check this helpt topic which show the default z-indices of RadControls.

I think in your case the container element of RadMenu has lower z-index than the container html element of the other control which RadMenu displays underneath:

<div style="z-index:1">
    <telerik:RadMenu style="z-index:10000000" />
</div>
<div style="z-index:2">
    RadMenu will never appear on top of this content
</div>
No matter how high the z-index of RadMenu is it will not display on top of the other element. This is actually not specific to RadMenu but to HTML and CSS.

The EnableOverlay property will not help in this case. Overlay is enabled by default and is useful only in Internet Explorer where HTML elements cannot appear on top of windowed controls (dropdown lists, flash etc). Those elements do not obey to z-index stacking rules in IE so a special approach is required. The EnableOverlay was introduced for the rare cases when it was causing side effects. As for the naming convention - you are right - those properties should have been named the same way.

In my opinion RadMenu cannot be directly compared to pure DHTML menu because the latter lacks any server API such as databinding, programmatic creation, AJAX support, server-side events etc.

I hope this helps,
Albert
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.

[-DJ-]

Hi Albert.

The element the menu slides under is a usercontrol, that displays a datalist. The only z-index stated for that user control is within the usercontrol itself and applies to a RadWindow.

I did try adding z-index declarations to the parent div of the menu, as well as link declarations for the div. This had no effect.
I also tried adding z-indexes to all the containers of the menu but again, no effect.

If you take a look at the base css: http://beta.d10.is/app_themes/reycup/reycup.css you will see that it's relatively z-index free.
The only element (apart from lightbox elements that only apply to photo albums) is a z-index of 10 for the topOptions. These are the links at the top, flags etc and they do not overlap the menu.

So what are we left with? In FF, the menu slides under the divMainContainer which has no z-index specified. This container has a contentplaceholder within it, which then contains the usercontrol. No z-indexes stated there at all.

Regards,
-DJ-

[Atanas Korchev]

Hi -DJ-,

By default if no z-index is specified and HTML elements are positioned ("relative" or "absolute") the order of the document determines their stacking. So this will also be true:

<div style="position:relative">
        <telerik:RadMenu />
</div>
<div style="position:relative">
   RadMenu will not overlay me!
</div>

Could you provide a live url of your page? I will check it with Firebug to see what the cause of this problem is.

Regards,
Albert
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.

[-DJ-]

Hi Albert,

I did actually include the url in the original post, you can see the site here: http://beta.d10.is/reycup/
Thank you for taking a look.

Regards,
-DJ-

[Atanas Korchev]

Hi -DJ-,

The reason for the menu not appearing was the overflow:hidden of this CSS rule:

.divInnerHeader {
background:transparent url(img/header_sprite.jpg) no-repeat scroll 0 0;
border-left:1px solid #DADADA;
border-right:1px solid #DADADA;
height:199px;
margin:0 auto;
overflow:hidden;
width:942px;
}

If you don't set it however the background image does not appear. It seems to be a rendering bug of FireFox which is resolvable by applying padding-top:1px instead of the overflow:hidden:

.divInnerHeader {
background:transparent url(img/header_sprite.jpg) no-repeat scroll 0 0;
border-left:1px solid #DADADA;
border-right:1px solid #DADADA;
display:block;
float:left;
height:199px;
margin:0 auto;
padding-top:1px;
width:942px;
}

Alternatively you can remove the margin-top of .divNavbar and use padding-top in .divInnerHeader. As strangely as it sounds it resolves the problem (you still need to remove overflow hidden which clips the menu).

Best wishes,
Albert
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.

[-DJ-]

Thank you so much Albert.

My mood-o-meter is rising fast :) No more complaining from me... for the entire day, I promise!

Regards,
-DJ-

[James Faw]

I would like to continue this issue.

I have just replaced for 1 of our old projects Q1 version of the Telerik with the newest one. We have the 2 controls on 1 of the pages:
1 - control which contains the menu
2 - Control with RadGrid + some other controls

in version Q1 everything worked fine. Now, all menus are behind second control. I replace back it start to work again as before.
And probably it is not behind 2 control. It might even be behind of boundary of the control itself.

Below, I show the html for Menu control:
 

<table cellpadding="0" cellspacing="0" border="0">
    <!-- Expand button -->
    <tr>
        <td style="width:1px; vertical-align:top;">
            <asp:ImageButton runat="server" ID="tbimage" ImageURL="Images/MenuPr.gif" Style="float: left; outline: 0;" />
        </td>
    </tr>
    <!-- Menu -->
    <tr>
        <td>
            <div id="divSliding" runat="server" style="visibility: hidden; display:none;">
                <telerik:RadPanelBar runat="server" ID="RadPanelBar1" Width="160px" ExpandMode="MultipleExpandedItems" ExpandAnimation-Type="none" Skin="Vista" Font-Size="8pt" CollapseAnimation-Type="none">
<Items>
<telerik:RadPanelItem Text="Finance" Value="FIN" Expanded="false">
    <Items>
    <telerik:RadMenuItem Text="Requests" Value="FIN_REQ" PostBack="false">
        <Items>
                                                        <telerik:RadMenuItem Text="Purchase Request" Value="FIN_REQ_Pur" Width="100%"></telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="Payment Request" Value="FIN_REQ_Pay" Width="100%"></telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="Expense Request" Value="FIN_REQ_Exp" Width="100%"></telerik:RadMenuItem>
                                                        <telerik:RadMenuItem Text="Purchase Approvals" Value="FIN_REQ_App" Width="100%"></telerik:RadMenuItem>
                                                   </Items>
                                                </telerik:RadMenuItem>
    </Items>
</telerik:RadPanelItem>
</Items>
</telerik:RadPanelBar>
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
        var panelDomElement = $get('<%=RadPanelBar1.ClientID %>');
        var timage = $get('<%= tbimage.ClientID %>');

        if (panelDomElement) {
            SetUpAnimation(timage.id, Telerik.Web.UI.jSlideDirection.Right, panelDomElement);
        }

        function SetUpAnimation(image, direction, element) {
            element.style.position = "relative";
            var slider = document.getElementById(image);

            var expanded = false; //orig: false;

            var expandAnimation = new Telerik.Web.UI.AnimationSettings({});
            var collapseAnimation = new Telerik.Web.UI.AnimationSettings({});

            //var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);
            var slide = new Telerik.Web.UI.jSlide(element, expandAnimation, collapseAnimation, false);

            slide.initialize();

            slide.set_direction(direction);

            slider.onclick = function() {

                element.parentNode.style.visibility = "visible"; //orig: visible
                element.parentNode.style.display = "block"; //orig: block
                if (!expanded) {
                    slide.expand();
                }
                else {
                    slide.collapse();
                }
                expanded = !expanded;
                return false;
            }
        }
</script>
<style type="text/css">
    .RadPanelBar,
    .RadPanelBar .rpSlide,
    .RadPanelBar .rpGroup,
    .RadPanelBar .rpTemplate,
    .SlidingDiv, .rpSlide
    {
        overflow:visible !important;
    }

    div.RadPanelBar .rpLevel1 .rpItem
    {
        padding:0;
    }

    * html .RadPanelBar .RadMenu ul.rmRootGroup
    {
        zoom: 1;
    }

    div.RadMenu .rmRootGroup
    {
        border: 0;
    }

    div.RadMenu .rmLink
    {
        float: none;
    }
</style>

[James Faw]

Actually leave it. I've just added ".RadPanelBar .rpItem" in the style for "overflow: visible"