RadTollBar and RadMenu: z-index issues

7 posts, 2 answers
  1. Veenu
    Veenu avatar
    45 posts
    Member since:
    Jun 2008

    Posted 13 Nov 2009 Link to this post

    Hi,

    I've used the RadToolBar as a container to display RadMenus. RadToolBar is placed in a Master Page so that it is available with standard features on all pages. RadToolBar is fixed in its position using CSS expressions:

    * html .ToolBar_Fixed 
            {
                position:relative !important;
                top:expression(eval(document.documentElement.scrollTop? document.documentElement.scrollTop : document.body.scrollTop) + "px");
                left:expression(eval(document.documentElement.scrollLeft? document.documentElement.scrollLeft : document.body.scrollLeft ) + "px");
            }   

    Now, the issue is that when the content page is scrolled, ToolBar stays at its position but standard dropdown controls (as shown in attached image) are displayed over it, and not under it. This issue appears with IE6 only and is fine with IE7.
    On the other hand, when other 3rd party controls (like charts) are to be shown, the RadMenus in the RadToolBar get hidden by the 3rd party controls and are not displayed (probably due to some z-index issue)  - This issue exists across browsers.

    Please help, as this is needed by the client for go-live very soon.
    Thanks.
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Nov 2009 Link to this post

    Hello Veenu,

    You should add an iframe with the same size as the toolbar next to is in order to fix this overlay issue in IE6. I've attached a simple page to demonstrate how you can do this. Please download the attached file and give it a try.

    Regarding the z-index question, please review this blog post for more information.

    Greetings,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Veenu
    Veenu avatar
    45 posts
    Member since:
    Jun 2008

    Posted 19 Nov 2009 Link to this post

    Hi,

    Did you forget to attach the sample file? I couldn't find it here with the reply.
    Can you please provide it again for reference?

    Thanks and Regards.
    Veenu Munjal
  5. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 19 Nov 2009 Link to this post

    Hello Veenu,

    I'm sorry I missed to attach file. Here it is.

    Greetings,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Veenu
    Veenu avatar
    45 posts
    Member since:
    Jun 2008

    Posted 01 Dec 2009 Link to this post

    Hi Yana,

    It works! And it worked on the same issue identified on RadWindow as well!
    Cheers! :)

    Thanks a  lot for your support.
    Best Regards,
    Veenu Munjal
  7. Veenu
    Veenu avatar
    45 posts
    Member since:
    Jun 2008

    Posted 05 Jan 2010 Link to this post

    Hi Yana,

     

    First of all, Wish you a very Happy New Year!

     

    I am sorry to bother you with the same old issue, but it has reoccured in the context that two Telerik Controls (RadToolbar and RadMenu) are now struggling for a higher z-index.

    Previously, my issue was that all controls (like Textboxes, Dropdowns) were being displayed over the RadToolBar which was fixed in position (not to be scrolled). And you gave me the fix so that RadToolbar is never overridden by any control.

    It was great and even worked on similar issues related to RadWindow!

    But now, in the header, I have a Culture RadMenu, which can list 10+ cultures, but the RadMenu goes behind the RadToolBar when it should appear over and above it. So a major feature comes to a new halt! :(

    Can you please help again on the same?

    Thanks and Regards,
    Veenu Munjal

  8. Answer
    Yana
    Admin
    Yana avatar
    4554 posts

    Posted 06 Jan 2010 Link to this post

    Hi Veenu,

    Happy New Year!

    You should set higher z-index to the menu in order to overlap the toolbar:

    <telerik:RadMenu ID="RadMenu1" runat="server" style="z-index:  200001;">

    Greetings,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017