changing z-index

9 posts, 0 answers
  1. Nik
    Nik avatar
    51 posts
    Member since:
    Sep 2009

    Posted 08 Dec 2010 Link to this post

    I'm having problems altering the z-index for my tooltip. IE is shoving the tooltip below our header. I tried adding a cssclass to the tooltip control, but using the ie web developer toolbar, its getting a z-index and other css values from I dont know where.

    <span id="spnPers" class="mouse-pointer learn-more">learn more</span>
    <rad:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="spnPers" IsClientID="true" Sticky="false" AutoCloseDelay="10000" Animation="none" Position="TopLeft" RelativeTo="Element" OffsetY="2" Height="100px" Width="300px" Skin="Default" Title="Personalize" CssClass="ontop">
    <p>
    Jazz up your folder presentation by personalizing your folders with a stock graphic and/or text. Choose from 4 different foil colors, 28 stock graphics and 11 font styles that are sure to add impact.
    </p>
    <br />
    <p>
    Additional $50 setup and $0.50 per folder foil fees apply. Personalized folders require a minimum purchase of 100 and then increments of 25.
    </p>
    <br />
    <p>
    Check on the Personalize box and click on the "Personalize and Add to Cart" button
    to get started building your personalized folders.
    </p>
    </rad:RadToolTip>

    .ontop
    {
        z-index:10000;
    }
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 09 Dec 2010 Link to this post

    Hello Nik,

    You can set the value of the z-index property of every Telerik control by using the common style property, e.g.

    <rad:RadToolTip ID="RadToolTip1" runat="server" style="z-index: 10000" ...


    You can find more information in the following article: Controlling absolute positioning with z-index.

    Kind regards,
    Rumen
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nik
    Nik avatar
    51 posts
    Member since:
    Sep 2009

    Posted 09 Dec 2010 Link to this post

    Adding this to my tooltip caused the text to be displayed inline with its triggering element until I hovered over that element. Even then, it still appeared under our header. I tried increasing the zindex to 100000, and still nothing. Our header is only at zindex of 3000.

    If it's of any significance, we're using version 5/15/2008
  5. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 09 Dec 2010 Link to this post

    Hello Nik,

    Using your onTop css class. Try changing it to this:

    .ontop
    {
        z-index:10000 !important;
    }

    This will enforce the z-index of the RadToolTip, even if it's set inline.

    I hope that helps.
  6. Nik
    Nik avatar
    51 posts
    Member since:
    Sep 2009

    Posted 09 Dec 2010 Link to this post

    Still nothing. IE web dev toolbar still shows the default zindex of 8000, which on its' own is higher than my header index of 3000. I'm getting a little confused why this is happening.
  7. Nik
    Nik avatar
    51 posts
    Member since:
    Sep 2009

    Posted 09 Dec 2010 Link to this post

    Also, I have a tooltip inside of a radmultipage panel, and it's appearing below the tabstrip as well. :( Interestingly tho, adding  style="z-index:95000;" to these tooltips didn't cause the text to go inline like the ones in the original post.
  8. Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 10 Dec 2010 Link to this post

    Hello Nik,

    I don't understand why it would show inline. Have your tried setting RenderInPageRoot="true" on the ToolTip? I don't know if that will solve anything, but it may.
  9. Nik
    Nik avatar
    51 posts
    Member since:
    Sep 2009

    Posted 10 Dec 2010 Link to this post

    Cori, thanks for your suggestion...it didn't make any difference tho.

    Another interesting note is that the tooltip works fine over the header in Firefox, but is appearing under the tabstrip...which I hadn't tested before. I thought this was just an IE issue, but it appears not.

    I welcome any other suggestions...I really need to try and get this resolved today so I can push this live Monday.
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 11 Dec 2010 Link to this post

    Hello Nik,

     I am afraid that I should examine the reproduction of the problem to be able to help. The possible reasons I could think of are the following ones:

    1) A z-index which is less than the one of the other element
    2) A parent or adjacent controls with specific position set


    This being said the only things I can suggest without examining the setup are:

    1) Make sure you have set the z-index by using the style attribute as my colleague suggested. You can also add the keyword !important to provide a higher priority to your setting in case it gets overridden for some reason - your setting should look like this:

    <rad:RadToolTip ID="RadToolTip1" runat="server" style="z-index: 10000 !important" ...

    2) Make sure that you have set RenderInPageRoot="true"

    If this does not help, please send me a live url along with detailed explanations or best - a fully runnable reproduction page and I will do my best to help.

    Best wishes,
    Svetlina
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017