Tooltip Hides behind RadDockZone in Firefox

8 posts, 0 answers
  1. blara
    blara avatar
    12 posts
    Member since:
    Jan 2006

    Posted 17 Jun 2008 Link to this post


    Hello:

    It works fine in IE and Safari, but in Firefox, the Tooltip hides (cropped) behind the User Control in RadDockZone. I am using ASP.NET AJAX controls. I tried setting z-index to a high value (9999) for the Tooltip, but that did not help. Any help will be much appreciated.

    Thanks,
  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 18 Jun 2008 Link to this post

    Hi blara,

    I tried to reproduce the problem but to no avail. Please open a support ticket and provide us with a small sample project that shows the reported behavior - we will check it and get back to you right away.



    Kind regards,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 27 Jun 2008 Link to this post

    I have the same issue.

    In fact it crops under the RadDockZone in both IE 7 and Firefox. Here is a sample WebPage showing the bug.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
       
            <telerik:RadDockLayout ID="Layout1" runat="server">
            <div>
                <telerik:RadDockZone ID="Zone1" runat="server" Width="500" Height="500">
                    <telerik:RadDock ID="Dock1" runat="server" Title="Test Dock" Height="250" Width="250">
                        <ContentTemplate>
                            <telerik:RadToolTip ID="RadToolTip1" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" Position="Center" Modal="true" TargetControlID="HyperLink1">
                                Hello from inside the tooltip
                            </telerik:RadToolTip>
                            <asp:HyperLink ID="HyperLink1" runat="server" Text="Click for tooltip" NavigateUrl="javascript:;" />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </div>
            </telerik:RadDockLayout>
       
        </form>
    </body>
    </html>

  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 30 Jun 2008 Link to this post

    Hi Gabriel,

    I tested the provided code and the only problem I noticed is that the modal background is applied only in the RadDock. You have set the RadToolTip's Modal property to true and that is why I assume that you want to show a modal RadToolTip above the whole page.

    If my assumption is correct I suggest to put the RadToolTip outside the RadDock and to use the target control's ClientID as shown below:

     <telerik:RadDockLayout ID="Layout1" runat="server">  
                <div> 
                    <telerik:RadDockZone ID="Zone1" runat="server" Width="500" Height="500">  
                        <telerik:RadDock ID="Dock1" runat="server" Title="Test Dock" Height="250" Width="250">  
                            <ContentTemplate> 
                                <asp:HyperLink ID="HyperLink1" runat="server" Text="Click for tooltip" /> 
                            </ContentTemplate> 
                        </telerik:RadDock> 
                    </telerik:RadDockZone> 
                    <telerik:RadToolTip ID="RadToolTip1" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" 
                        Position="Center" Modal="true" IsClientID="true" TargetControlID="<%# HyperLink1.ClientID%>">  
                        Hello from inside the tooltip  
                    </telerik:RadToolTip> 
                </div> 
            </telerik:RadDockLayout> 

    Please, note that in order to evaluate the TargetControlID expression you should call the RadToolTip's DataBind method in the code-behind:

       protected void Page_Load(object sender, EventArgs e)  
        {  
            RadToolTip1.DataBind();  
        } 

    For your convenience I attached a sample demo project.

    In case I have not understand you correctly, please open a new support ticket and send me a sample demo along with a detailed explanation of the desired behavior and some screenshots. One I receive it I will do my best to help.


    Regards,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 30 Jun 2008 Link to this post

    Ok,

    But what if I want to use a ListView inside the RadDock and use the Eval inside a RadTooltip, I cannot put the RadTooltip outside the RadDock since it needs to be inside the ListView.

    What can I do?
  7. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 01 Jul 2008 Link to this post

    Hello Gabriel,

    In this particular scenario it is not possible to achieve the desired behavior. The problem is not caused by z-indexes but because of the browser behavior when the tooltip is inside the dock.

    I suggest to set a bigger size for the dock or a smaller one for the tooltip.

    Greetings,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Gabriel Beauchamp
    Gabriel Beauchamp avatar
    41 posts
    Member since:
    Jan 2008

    Posted 01 Jul 2008 Link to this post

    I have yet another weird problem with the ToolTip not showing at all.

    Please test this in FireFox, you'll see that the first tooltip inside the first Dock will show fine, but the other two will not show at all. If you have more than 1 Dock, the Tooltip does not show. Copy and paste this exact code to test:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Untitled Page</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

       
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server" storelayoutinviewstate="false" >
            <div style="float:left;">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" EnableEmbeddedSkins="false" Skin="l33tlink" Orientation="Vertical" Width="625px">
                   
                    <telerik:RadDock style="margin-bottom:15px !important;" ID="RadDock_GroupMembers" runat="server" Title="Group Members" DockMode="Docked" EnableDrag="false">
                        <Commands>
                            <telerik:DockExpandCollapseCommand />
                        </Commands>
                        <ContentTemplate>
                        <table>
                            <tr>
                                <td>
                                    <telerik:RadToolTip ID="RadToolTip1" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" Position="Center" TargetControlID="HyperLink1" >
                                Hello from inside the tooltip
                            </telerik:RadToolTip>
                            <asp:HyperLink ID="HyperLink1" runat="server" Text="Click for tooltip" NavigateUrl="javascript:;" />   
                                </td>
                            </tr>
                        </table>
                           
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock style="margin-bottom:15px !important;" ID="RadDock1" runat="server"  Title="Group Members2" DockMode="Docked" EnableDrag="false">
                        <Commands>
                            <telerik:DockExpandCollapseCommand />
                        </Commands>
                        <ContentTemplate>
                        <table>
                            <tr>
                                <td>
                                    <telerik:RadToolTip ID="RadToolTip2" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" Position="Center" TargetControlID="HyperLink1">
                                Hello from inside the tooltip
                            </telerik:RadToolTip>
                            <asp:HyperLink ID="HyperLink2" runat="server" Text="Click for tooltip" NavigateUrl="javascript:;" />   
                                </td>
                            </tr>
                        </table>
                           
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock style="margin-bottom:15px !important;" ID="RadDock2" runat="server"  Title="Group Members3" DockMode="Docked" EnableDrag="false">
                        <Commands>
                            <telerik:DockExpandCollapseCommand />
                        </Commands>
                        <ContentTemplate>
                        <table>
                            <tr>
                                <td>
                                    <telerik:RadToolTip ID="RadToolTip3" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" Position="Center" TargetControlID="HyperLink1">
                                Hello from inside the tooltip
                            </telerik:RadToolTip>
                            <asp:HyperLink ID="HyperLink3" runat="server" Text="Click for tooltip" NavigateUrl="javascript:;" />   
                                </td>
                            </tr>
                        </table>
                           
                        </ContentTemplate>
                    </telerik:RadDock>
                   
                </telerik:RadDockZone>
            </div>
            </telerik:RadDockLayout>

       
        </form>
    </body>
    </html>
  9. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 04 Jul 2008 Link to this post

    Hello Gabriel,

    I tested your code and I noticed that the TargetControl for all your RadToolTips is the same - Hyperlink1.

    You should set the proper target controls as shown below:

     <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server" StoreLayoutInViewState="false">  
            <div style="float:left;">  
                <telerik:RadDockZone ID="RadDockZone1" runat="server" EnableEmbeddedSkins="false" 
                    Skin="l33tlink" Orientation="Vertical" Width="625px">  
                    <telerik:RadDock Style="margin-bottom: 15px !important;" ID="RadDock_GroupMembers" 
                        runat="server" Title="Group Members" DockMode="Docked" EnableDrag="false">  
                        <Commands> 
                            <telerik:DockExpandCollapseCommand /> 
                        </Commands> 
                        <ContentTemplate> 
                            <table> 
                                <tr> 
                                    <td> 
                                        <asp:HyperLink ID="HyperLink1" runat="server" Text="Click for tooltip" /> 
                                    </td> 
                                </tr> 
                            </table> 
                            <telerik:RadToolTip ID="RadToolTip1" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" 
                                Position="Center" TargetControlID="HyperLink1">  
                                Hello from inside the tooltip  
                            </telerik:RadToolTip> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
                    <telerik:RadDock Style="margin-bottom: 15px !important;" ID="RadDock1" runat="server" 
                        Title="Group Members2" DockMode="Docked" EnableDrag="false">  
                        <Commands> 
                            <telerik:DockExpandCollapseCommand /> 
                        </Commands> 
                        <ContentTemplate> 
                            <table> 
                                <tr> 
                                    <td> 
                                        <telerik:RadToolTip ID="RadToolTip2" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" 
                                            Position="Center" TargetControlID="HyperLink2">  
                                            Hello from inside the tooltip  
                                        </telerik:RadToolTip> 
                                        <asp:HyperLink ID="HyperLink2" runat="server" Text="Click for tooltip" /> 
                                    </td> 
                                </tr> 
                            </table> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
                    <telerik:RadDock Style="margin-bottom: 15px !important;" ID="RadDock2" runat="server" 
                        Title="Group Members3" DockMode="Docked" EnableDrag="false">  
                        <Commands> 
                            <telerik:DockExpandCollapseCommand /> 
                        </Commands> 
                        <ContentTemplate> 
                            <table> 
                                <tr> 
                                    <td> 
                                        <telerik:RadToolTip ID="RadToolTip3" runat="server" ShowEvent="OnClick" RelativeTo="BrowserWindow" 
                                            Position="Center" TargetControlID="HyperLink3">  
                                            Hello from inside the tooltip  
                                        </telerik:RadToolTip> 
                                        <asp:HyperLink ID="HyperLink3" runat="server" Text="Click for tooltip" /> 
                                    </td> 
                                </tr> 
                            </table> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
                </telerik:RadDockZone> 
            </div>-  
              
            </telerik:RadDockLayout> 
        </form> 
    </body> 
    </html> 

    For your convenience I attached your modified page.



    All the best,
    Svetlina
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017