Trouble with z-index

3 posts, 0 answers
  1. Alex
    Alex avatar
    23 posts
    Member since:
    Nov 2013

    Posted 04 Apr 2018 Link to this post

    I have Bootstrap 3 dropdowns (like these http://getbootstrap.com/docs/3.3/javascript/#dropdowns ) on my page and multiple buttons that open RadWindows. My trouble is that the RadWindows always put themselves overtop of the dropdowns, even if I give the dropdowns a super high z-index.

    I can set all my dropdown menus to be "z-index: 9999999;" and no matter what, the RadWindows always position themselves above. I can manually force each ".RadWindow" class to use "z-index: 100 !important;" but that breaks the ability to have one RadWindow gain z-index advantage over competing RadWindows when clicked/focused. There doesn't seem to be a good way to make these two things work. I've also tried to capture the Bootstrap dropdown's "shown" event to adjust its z-index to always be higher than any RadWindows that might be obstructing it, but that didn't help either.

     

    How can I make these two things play together nicely if giving the dropdowns a high z-index isn't working? I want my dropdown-menu's to always have the highest priority possible when displaying one because in my website they're more important than whats in the windows, and its very frustrating to have to move RadWindows out of the way to be able to see the contents of a dropdown.

  2. Rumen
    Admin
    Rumen avatar
    14010 posts

    Posted 05 Apr 2018 Link to this post

    Hello,

    Here is an example how to increase the z-index of the bootstrap dropdown:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Editor.aspx.cs" Inherits="Editor" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
        <style>
            .dropdown-menu
            {
                z-index: 10000 !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
     
            <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     
            <telerik:RadWindow ID="dasdas" runat="server" VisibleOnPageLoad="true">
                <ContentTemplate>
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                            Dropdown Example
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">JavaScript</a></li>
                        </ul>
                    </div>
                </ContentTemplate>
            </telerik:RadWindow>
     
            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                    Dropdown Example
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                </ul>
            </div>
     
        </form>
    </body>
    </html>

    For your convenience I have also recorded a video demonstration.


    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Alex
    Alex avatar
    23 posts
    Member since:
    Nov 2013

    Posted 05 Apr 2018 Link to this post

    Thanks for the video, I was seeing different results on my end, hence this thread... but I discovered its actually an issue when the parent container is set to "position: fixed".

    I alleviated this by not using fixed positioning anymore, here's an example of when z-index does not work:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="WindowTest.test" %>
     
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Test Page</title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
            .dropdown-menu {
                z-index: 10000 !important;
            }
        </style>
    </head>
    <body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="radScriptManager1" runat="server"></telerik:RadScriptManager>
        <telerik:RadWindowManager ID="radWindowManager1" runat="server" Skin="Bootstrap" RenderMode="Lightweight"></telerik:RadWindowManager>
         
        <div id="container-area">
            <div id="header-area" style="width: 100%; background: grey; position: fixed;">
                <div class="btn-group">
                    <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Test Button
                    </button>
                    <ul class="dropdown-menu">
                        <li>Test Link 1</li>
                        <li>Test Link 2</li>
                        <li>Test Link 3</li>
                        <li>Test Link 4</li>
                    </ul>
                </div>
            </div>
             
            <div id="content-area" style="width: 100%; height: 900px;"></div>
        </div>
         
        <script src="Content/Scripts/jquery-3.3.1.min.js"></script>
        <script src="Content/Scripts/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                radopen("about:blank", null, 300, 500);
            });
        </script>
    </form>
    </body>
    </html>
Back to Top