Toolbar Z-index problem in Chrome

5 posts, 0 answers
  1. Hilmi Alphan Ozturk
    Hilmi Alphan Ozturk avatar
    5 posts
    Member since:
    May 2009

    Posted 25 Jul 2009 Link to this post

    Hi,

    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">
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 28 Jul 2009 Link to this post

    Hi Ozgur,

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hilmi Alphan Ozturk
    Hilmi Alphan Ozturk avatar
    5 posts
    Member since:
    May 2009

    Posted 01 Aug 2009 Link to this post

    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>

  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Aug 2009 Link to this post

    Hello Hilmi,

    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.
  6. Hilmi Alphan Ozturk
    Hilmi Alphan Ozturk avatar
    5 posts
    Member since:
    May 2009

    Posted 14 Aug 2009 Link to this post

    Thanks Kamen, your suggestion fixed my problem.

    Ozgur
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017