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 Answers, 1 is accepted
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><html xmlns="http://www.w3.org/1999/xhtml"><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"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <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
Rank 1
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>