Overlapping menus

7 posts, 0 answers
  1. Javier
    Javier avatar
    35 posts
    Member since:
    Aug 2011

    Posted 14 Oct 2011 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 14 Oct 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Javier
    Javier avatar
    35 posts
    Member since:
    Aug 2011

    Posted 17 Oct 2011 Link to this post

    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.
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 19 Oct 2011 Link to this post

    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
  6. Javier
    Javier avatar
    35 posts
    Member since:
    Aug 2011

    Posted 19 Oct 2011 Link to this post

    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
  7. umar okeeffe
    umar okeeffe avatar
    19 posts
    Member since:
    Dec 2009

    Posted 15 Dec 2011 Link to this post

    Where exactly did you add the code? RadMenuScripts.js ?
    I got this same issue, but I'm not using the webservice option.
    Please help!
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 20 Dec 2011 Link to this post

    @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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017