Rank 1
I am using Telerik v 2009.01.0527.35. I have a toolbar used as an application menu bar within a Pane. This works fine in Firefox and IE but on Chrome, The menu bar drop down items are shown below my content on the other pane (i.e. this is a z-index problem). The toolbar has a z-index style as given below. When I add a Style="z-index: 9000001" tag to the Toolbarbutton items, now the text and the icons in the drop down menu items are visible but still there's no background or frame. Any ideas to fix that?
Thanks,
Ozgur
<telerik:RadToolBar ID="mainToolBar" runat="server" Style="z-index: 9000001" Width="1600px" OnClientButtonClicking="blue.controlHandler">
4 Answers, 1 is accepted
I tested the described situation and wasn't able to reproduce this issue in Chrome, I've attached my test page for a reference. I guess that some styles on your page overwrite RadToolBar's styles. Could you please isolate the issue in a small runnable project (including all the styles) and send it us? You should open a support ticket in order to be able to attach files. Thanks in advance
Greetings,
Yana
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
Hi Yana,
Sorry I have given you insufficient information. I am actually using Google Maps in the pane (which makes use of differen z-indexes on different layers) and the dropdown shows above the map in IE which it should, it does not show above the frame in Chrome.
I can't seem to be able to upload a file here. But here's the aspx source which does reproduce the problem added on your sample:
Thanks,
Ozgur
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="
http://www.google.com/jsapi?key=ABQIAAAA4ozQiDEE5UGlbiFEKMhRRBRFiDtrm8NWiQGPSnZVvvYah2KtGxQbVQOWJiUgpmIy2MxH0bNFpNXm_g"></script>
<script type="text/javascript">
google.load('jquery', '1.2.6');
google.load('prototype', '1.6.0.3');
google.load('maps', '2.160');
var map;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("mapCanvas"));
map.setCenter(new GLatLng(30.86, -83.06), 5);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" >
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal">
<telerik:RadPane ID="RadPane1" runat="server" Height="100px">
<telerik:RadToolBar ID="mainToolBar" runat="server" Style="z-index: 9000001" Width="100%">
<Items>
<telerik:RadToolBarDropDown Text="dropdown">
<Buttons>
<telerik:RadToolBarButton Text="button 1" />
<telerik:RadToolBarButton Text="button 2" />
<telerik:RadToolBarButton Text="button 3" />
<telerik:RadToolBarButton Text="button 4" />
<telerik:RadToolBarButton Text="button 5" />
</Buttons>
</telerik:RadToolBarDropDown>
</Items>
</telerik:RadToolBar>
</telerik:RadPane>
<telerik:RadPane ID="RadPane2" runat="server" BackColor="red">
<!-- Place the content of the pane here -->
<div id="mapCanvas" style="top: 0; left: 0; width: 100%; height: 100%" />
</telerik:RadPane>
</telerik:RadSplitter>
</div>
</form>
</body>
</html>
Looks like the max z-index you can use in WebKit based browsers is 999999. This happens due to a bug in WebKit which formats the numbers above this one as float and they fail to be transferred to the DropDown. Check if lowering the z-index will fix it for you.
Regards,
Kamen Bundev
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Rank 1
Ozgur