RAD Scheduler always appearing on top of my javascript hover menu

6 posts, 0 answers
  1. Angelo
    Angelo avatar
    6 posts
    Member since:
    Jul 2008

    Posted 13 Feb 2013 Link to this post


    I have an existing website with a typical javascript hover menu navigation at the upper portion of the screen in the form of a 
    <div> with  some nested lists <ul>...

    The css for this begins with 

    #menu {
        float: left;
    #menu ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 11em; 
        float: left;

    However, then i placed the RAD Scheduler, it's always persisting on top of the hover navigation even though i enclosed it with

    <div   style="z-index:0; ">
                runat="server" ....

    So far the attempted css z-index:8000 is not working to bring the hover menu to the top. 

    May i request some code assistance for this? Appreciate any help :-) I'm just a newbie to the telerik components for asp.net :)

    Attached is a screenshot.


  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 14 Feb 2013 Link to this post

    Hi Angelo,

    Try setting the RadScheduler's z-index to -1. Since most elements in the DOM are initialized with a z-index of 0, it will ensure that the RadScheduler shows up behind elements that you have not explicitly defined the z-index for.

    Good luck,
    Master Chief
  3. Boyan Dimitrov
    Boyan Dimitrov avatar
    2062 posts

    Posted 18 Feb 2013 Link to this post


    In case of stacking issues we recommend providing a simplified page or live URL, so we can inspect and find out what is causing this unusual behavior.
    I am afraid that it might exist lots of reasons for such behavior. HTML stacking order or the container z-index  value also might cause such issue as the one provided in the attached image.

    Could you please provide simplified page or live URL that reproduces the issue?

    Boyan Dimitrov
    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.
  4. Vince
    Vince avatar
    7 posts
    Member since:
    Jan 2013

    Posted 01 Mar 2013 Link to this post

    I am having the exact same issue, but only with IE.  It doesn't do this in Chrome or Firefox.  My menu is in a masterpage.


        <telerik:RadScheduler ID="RadScheduler1" runat="server" Style="z-index: 1000" SelectedView="MonthView" TimeZoneID="Central Standard Time" TimeZoneOffset="-06:00:00" 
            DataDescriptionField="Description" DataEndField="EndTime" DataKeyField="INTID" DataSourceID="SqlDSAllApplicants" DataStartField="StartTime" 
            DataSubjectField="Subject" StartInsertingInAdvancedForm="True" Skin="Telerik" OverflowBehavior="Expand" >
            <AdvancedForm Modal="True" />


        font-size: .80em;
        padding: 4px 0px 4px 8px;
        z-index: 8000;

    div.menu ul
        list-style: none;
        margin: 0px;
        padding: 0px;
        width: auto;
        z-index: 8000;

                <div class="clear hideSkiplink">
                    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" >
                            <asp:MenuItem NavigateUrl="~/default.aspx" Text="Home"/>
                            <asp:MenuItem NavigateUrl="~/AppConsole.aspx" Text="Pre-Interview Console" Value="Applicant Console" />
                            <asp:MenuItem NavigateUrl="~/PostInterviewConsole.aspx" Text="Post Interview Console" Value="Post Interview Console" />
                            <asp:MenuItem Text="Charts/Graphs" Value="Charts" Selectable="False" >
                                <asp:MenuItem NavigateUrl="AppChart_RateByUser.aspx" Text="Rating by Users" Value="Rating by User"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="AppChart_UserRatings.aspx" Text="User Ratings" Value="User Ratings"></asp:MenuItem>
                                <asp:MenuItem NavigateUrl="AppChart_AvgRating.aspx" Text="Average Rating by User" Value="Average Rating by User"></asp:MenuItem>                            
                            <asp:MenuItem NavigateUrl="InterviewsCalendar.aspx" Text="Calendar" Value="Calendar" />
                            <asp:MenuItem NavigateUrl="~/ArchiveConsole.aspx" Text="Archives" Value="Archive Console" />                        
  5. Vince
    Vince avatar
    7 posts
    Member since:
    Jan 2013

    Posted 01 Mar 2013 Link to this post

    Seems that my IE10 was running in Compatibility View while on the intranet site.  I unchecked the option as shown in the attachment.  All is good now.  Hope this can help someone else.
  6. Chema
    Chema avatar
    1 posts
    Member since:
    May 2013

    Posted 14 May 2013 Link to this post

    try this, 

      div.RadScheduler .rsHeader
                z-index: 0;
Back to Top