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

Overlapping menus

6 Answers 73 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Javier
Top achievements
Rank 1
Javier asked on 14 Oct 2011, 01:00 PM
I have a radmenu in a usercontrol that gets repeated on several pages.  
Sometimes, when a menu expands the second menu gets hidden behind another instance of the user control. 

Obviously, this is a z-index issue.  But I haven't been able to find a place to change the style to avoid this from happening.

I've attached an image of what's going on.

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 14 Oct 2011, 01:43 PM
Hello Javier,

You can set the z-index like below:

ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Radmenu.aspx.cs" Inherits="Radmenu" %>
 
<%@ 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">
<head runat="server">
<title></title>
 <style type="text/css">
 .test
 {
  z-index: 5000 !important;
 }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="scriptmngr" runat="server">
</asp:ScriptManager>
<telerik:RadMenu ID="RadMenu1" runat="server">
<Items>
<telerik:RadMenuItem runat="server" Text="R1">
<Items>
<telerik:RadMenuItem runat="server" Text="Ch1">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Ch2">
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="Ch3">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
<telerik:RadMenuItem runat="server" Text="R2">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
<br />
<br />
<telerik:RadMenu ID="radmenu2" runat="server" CssClass="test">
<Items>
<telerik:RadMenuItem runat="server" Text="ABC">
<Items>
<telerik:RadMenuItem Text="ABC1">
</telerik:RadMenuItem>
</Items>
</telerik:RadMenuItem>
</Items>
</telerik:RadMenu>
</div>
</form>
</body>
</html>

Thanks,
Princy.
0
Javier
Top achievements
Rank 1
answered on 17 Oct 2011, 01:11 PM
Thank you for your quick response.  Unfortunately, that didn't fix the issue.

Here is what the user control looks like

<table cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <telerik:RadComboBox ID="rcbReferrer" runat="server" Width="250px" Height="150px"
                EmptyMessage="Start typing a name or group" EnableAutomaticLoadOnDemand="true"
                EnableLoadOnDemand="true" AllowCustomText="false" ShowWhileLoading="true" OnClientItemsRequesting="SetReferrerOptions"
                OnClientSelectedIndexChanged="CheckForNotes" OnClientItemsRequested="HandleLineBreaks"
                OnClientBlur="LoseFocus" ZIndex="10000">
                <WebServiceSettings Method="GetReferrers" Path="../WebServices/Schedule/TelerikSchedulerService.asmx" />
            </telerik:RadComboBox>
            <asp:RequiredFieldValidator ID="requiredFieldValidator1" ControlToValidate="rcbReferrer"
                ErrorMessage="Please enter a value" Display="Dynamic" Enabled="false" runat="server" />
        </td>
        <td>
            <asp:ImageButton ImageUrl="../images/cancel_updated.gif" ID="imbDelete" OnClientClick="return confirm('Are you sure you want to remove this person?');"
                runat="server" />
        </td>
        <td>
             <asp:Button ID="btnAdd" runat="server" Text="Add" UseSubmitBehavior="false"
                CssClass="clsInput" />
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <asp:HiddenField ID="hdnSelectedOffice" Value="-1" runat="server" />
            <telerik:RadMenu ID="rdmOffices" runat="server" ClickToOpen="true"  OnClientItemClosed="OnClientItemClosedHandler"
                OnClientItemPopulating="radMenuItemPopulating" OnClientItemClicked="onMenuClick"  Height="50"
                  rcbID="<%# rcbReferrer.clientid %>" style="display: none;" selectedOffice="0">
                <WebServiceSettings Path="../WebServices/Schedule/TelerikSchedulerService.asmx" Method="GetOfficeItems" />
                <LoadingStatusTemplate>
                     
                    loading...
                </LoadingStatusTemplate>
                 
                <Items>                   
                    <telerik:RadMenuItem Text="Please select an office" Value="-1" ExpandMode="WebService" CssClass="RadMenuParent"  >
                        <GroupSettings ExpandDirection="Right"  />
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>           
        </td>
    </tr>
</table>


I have a feeling that it has something to do with the user controls.  However, it does fine with appearing on top of the radcombobox, so I'm sure that there is something we can do.  Unfortunately, I'm at a bit of a loss.

Please let me know if you have any more ideas, this is a bit urgent.
0
Kate
Telerik team
answered on 19 Oct 2011, 03:36 PM
Hi Javier,

I tested the code that you have provided but I am not able to reproduce the issue that you encounter (see the attached image). I also noticed that you apply different css classes to the RadMenuItem which might be causing the problematic appearance as well. Therefore to be able to help you I will need either a live url or a simplified runnable project that we could inspect locally (you do not need to bing the control by using web services, but simply put some items in the markup would be enough).  

Greetings,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Javier
Top achievements
Rank 1
answered on 19 Oct 2011, 03:51 PM
After much debugging I found the issue.

First: It's specific to a radmenu that exapands with a webservice.  I tested it with other user controls and it worked perfectly.  I created a new page with nothing but the user control, I also created new usercontrols with a rad menu without a webservice and it worked fine.

Second:  It only occurs after the lower menu gets clicked once.  Once that usercontrol gets focus for the first time, the z-index of the entire div gets updated, but never reverts back to the original index.  This is where the issue is at the core, the changing zindex.

How I fixed it was by adding a line to the client side menu click event.

document.getElementById(sender.get_id()).style.zIndex = (getMenuPageIndex(sender.get_id()) * -1) + 3000;


The function "getMenuPageIndex", is a method that parses and returns an integer from the user control name itself.  I used the id of the user control to create a type of index by adding an integer.  The fully rendered it includes the radmenu id as well as the usercontrol id and allows me to easily access the index that I set on the page level.

Once I have that index, I'm able to reset the zindex of the div itself, while incrementing 1 for each element found on the page allowing the menus to overlap from top to bottom and not the other way around.  This way the uppermost menu gets priority and cascades downward.

The classes that I applied were in response to your first suggestion.  After that didn't work, I kept trying out different methods to force the zindex.  But since it was occurring on the clickevent, any classes I added were being overwritten by the bug.

Since I've got you here, I'll mention some other things that I noticed.

1) The close animation doesn't occur when the expandmode is set to webservice.  It animates on expand, but just disappears on close.
2) When a height is set the width is forced.  This is handled differently by different browsers (IE and Firefox). 

Thanks for your help,
Javier
0
umar okeeffe
Top achievements
Rank 1
answered on 15 Dec 2011, 09:19 PM
Where exactly did you add the code? RadMenuScripts.js ?
I got this same issue, but I'm not using the webservice option.
Please help!
0
Kate
Telerik team
answered on 20 Dec 2011, 12:55 PM
@umar - as explained in this forum post the issue that you encounter turned to be a bug of the RadMenu and I am not quite sure if the issue is the same as the one that Javier describes.

@Javier - Thought we were not able to replicate your issue thank for letting us know about the work around that you used in your scenario since it might be helpful for other users. Considering the other issues that you noticed I would like to ask you if you were able to reproduce them using our on-line demo and what is the version of the Telerik controls that you are using?


Kind regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Tags
Menu
Asked by
Javier
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Javier
Top achievements
Rank 1
Kate
Telerik team
umar okeeffe
Top achievements
Rank 1
Share this question
or