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

Overlapping menus

6 Answers 228 Views

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

6 Answers, 1 is accepted

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

<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.

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.

answered on 19 Oct 2011, 03:36 PM

menu.png

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

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

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

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

Overlapping menus

6 Answers, 1 is accepted