Z-Index Issue with content

8 posts, 1 answers
  1. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 22 Apr 2012 Link to this post

    Hi:

    Having a z-index issue with the dropdown part of menu.  See attached file.

    Phil
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 23 Apr 2012 Link to this post

    Hi Phil,

    You get this look since the z-index of the RadToolBar control is higher than the one of the RadMenu. Therefore in order to get the correct appearance you will need to alter the z-index of either of the controls so that the one on top should have a higher z-index. I would suggest that you refer to the following help article where it is explained in details how this can be done - Controlling absolute positioning with z-index

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 23 Apr 2012 Link to this post

    Hi Kate:

    I am running versio 2011.2.915.40.  Does the dropdown part of the menu now have a separate z-index.  I have the menu-bar set to 2700 because of RadComboBox sometimes go up under the menu-bar.

    I am having this problem with RadTabStrip and RadScheduler.

    I am NOT having the problem with RadPanel, RadCalendar, RadButton, RadChart, RadComboBox and RadGrid.

    I see:
    .RadMenu_Context
    {
        z-index:1000;
        overflow:visible;
    }
    is that the dropdown part and how do it reset the value.

    Phil
  5. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 24 Apr 2012 Link to this post

    Hi:
    Attached is an image of the same form under Firefox, ... it is fine, so this is a IE 9 issue.
    Phil
  6. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 25 Apr 2012 Link to this post

    Hi Phil,

    I tested your scenario with the 2011.2.915.40 version of the Telerik controls in IE7,8 and 9 as well as the different skins including the "Outlook"  but I can not replicate the issue that you encounter. Do you use master/content pages or any custom styles that might be causing this appearance?

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 25 Apr 2012 Link to this post

    Hi:

    The RadMenu is in the master page and the RadTabStrip is in the content page, and I have the following css applied to the ts and mp per Telerik previous suggestion.
    <style type="text/css">
      .mpStyle { border: 1px solid #898c95; margin-top: -1px; }
      .tsStyle { position: relative; }
    </style>
    And if one removes the above css, the problem disappears in IE9.
    http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/convert-from-ajax-toolkit-tabs-to-telerik-tabstrip.aspx
    So, how do I fixup the tsStyle?
    Phil
  8. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 26 Apr 2012 Link to this post

    Hello Phil,

    I noticed that you also opened a support ticket with the same issue (ID 537506) and therefore I would like to ask you to keep the communication in one place so we can avoid any confusion. 

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 27 Apr 2012 Link to this post

    Hi Kate:
    I am closing the ticket. 
    My RadMenu was inside a div tag with the class header.  Header also has a position: relative; style and it appears that IE does not like nested position: relative; styles.
    .header
    {
        position: relative;
        margin: 0px;
        padding: 0px;
        background: #4b6c9e;
        width: 100%;
    }

    Thanks for all your help.  You are great.
    Phil
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017