Horizontal menu behind RADDropdownList

3 posts, 0 answers
  1. Jerry
    Jerry avatar
    5 posts
    Member since:
    Nov 2018

    Posted 25 Jan 2019 Link to this post

    I have a web form master page that has a menu across the top, then I have 3 RAD Dropdown lists.

    When I access the menu, the menu items are displaying BEHIND the drop down lists, not in front of them.

    I am using "default" code from Microsoft for the contents of the master page, and I added the telerik items to that page.

    Here is a snippet of the code:

    I know it probably has something to do with CSS, but I am not sure where to look?

    <form id="form1" runat="server">
        <div class="page">
            <div class="header">
                <div class="title">
                    <h1>GLISA Score Entry and Report Processor</h1>
                </div>
                <div class="clear hideSkiplink">
                    <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    </asp:Menu>
                </div>
            </div>
            <div class="main">
                <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
                </telerik:RadStyleSheetManager>
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                    <Scripts>
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                    </Scripts>
                </telerik:RadScriptManager>
                <telerik:RadDropDownList
                    AppendDataBoundItems="true"
                    AutoPostBack="true"
                    Width="300px"
                    ID="ddl_Season"
                    runat="server"
                    SelectedText="Please select Season"
                    DataSourceID="dsSeasonName"
                    DataTextField="SeasonName"
                    DataValueField="ID">

     

  2. Jerry
    Jerry avatar
    5 posts
    Member since:
    Nov 2018

    Posted 25 Jan 2019 Link to this post

    OK - setting the menu div z-index to 999 in the css file fixed it.

    Guess I need to read up on CSS more!!

     

  3. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5799 posts

    Posted 25 Jan 2019 Link to this post

    You may also find useful the following list with the default z-index values of our controls: https://docs.telerik.com/devtools/aspnet-ajax/controls/controlling-absolute-positioning-with-z-index.

    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top