This is a migrated thread and some comments may be shown as answers.

Adding a GoogleMap control inside a RadToolTip... incomplete rendering...

3 Answers 156 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Jess Askey
Top achievements
Rank 1
Jess Askey asked on 31 Dec 2008, 02:56 PM
Hello...

I am trying to place a GoogleMap inside of a Telerik RadToolTip (Q2 2008) Template and I am having issues with it rendering incompletely... (see photo in this example.

This issue comes down to both the RadToolTip and the RadMenuItem CSS using display: none; for their intial state of the hidden divs. From reading this post  on the googleapi forums, it seems that the suggested manner of solving this problem is by using either visibility: hidden; or by setting the z-index.

Since the CSS is emitted directly from the control... (here is a snippet of my page source)

<div id="ctl00_RadToolTipSiteMap" HideEvent="FromCode" style="display:none;">  
      

is there any way to change the way that the RadToolTip or the RadMenu renders hidden div's?

The .NET control for including a GoogleMap is available from http://googlemaps.subgurim.net/

My aspx looks like this... pretty simple...  Q2 2008, happens in both both IE6.0 and Firefox 2

<div style="float: left; width: 80px; height: 24px; border-top: 1px solid #383838;text-align: left;">  
 
<span style="margin: 2px;">  
<asp:Image ID="ImageSiteMapIcon" runat="server" ImageUrl="~/gearth.gif" /></span>  
<span id="sitemaplink" style="color: #fff; font: normal 12px Arial, sans-serif;">SiteMap</span></div>  
 
<telerik:RadToolTip ID="RadToolTipSiteMap" runat="server" HideEvent="FromCode" TargetControlID="sitemaplink" IsClientID="true" RelativeTo="Element" Skin="Default" Position="BottomRight" OffsetX="-15" Animation="Resize" Height="350px" Width="500px" ShowEvent="OnMouseOver" ManualClose="true" > 
 
<asp:UpdatePanel ID="upComments" runat="server">  
 
<ContentTemplate> 
 
<cc1:GMap ID="Map2" runat="server" Height="350px" Width="500px" /> 
 
</ContentTemplate> 
 
</asp:UpdatePanel> 
 
</telerik:RadToolTip> 
 

thank you in advance!!

jess

3 Answers, 1 is accepted

Sort by
0
Svetlina Anati
Telerik team
answered on 05 Jan 2009, 03:46 PM
Hello Jess,

We were able to reproduce the problem and we researched it further.  However, it seems that the problem comes from the complicated scenario and settings you have made  and this might happen when different third party controls are used in integration.

The problem with the GoogleMap can be reproduced without using RadToolTip at all - all you need to do to observe the issue is to move the map in the DOM and to also have it placed in an absolute positioned element. While researching this we built-up a test demo and I attach it to the thread - please make the map work with this setup which uses only standard elements and in case you succeed, just open a new support ticket and send the standard elements' solution along with detailed explanations. ONce we receive it we will make it work with the RadToolTip as well.



All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Jess Askey
Top achievements
Rank 1
answered on 09 Jan 2009, 02:14 AM
Hello Svetlina...

thank you for your reply... I have the code modified to correctly display the map using standard elements... the only thing I had to change was the style of the hidden div to use 'visibility: hidden;' instead of 'display: none;'

<div id="hidden" class="flow" style="visibility: hidden;">  
    <div id="temp">  
         <cc1:GMap ID="GMap1" runat="server" Height="350px" Width="500px" Key="http://www.google.com/apis/maps/" /> 
    </div> 
</div> 

This solution is detailed at... Google MAP API

When I looked at the RadToolTip source (asp), it appears that the hidden tooltip div uses the display: none css style.

<div id="ctl00_RadToolTipSiteMap" HideEvent="FromCode" style="display:none;"

I thought that I would be able to override this by making a custom skin and specify my own style for the ToolTipCallout...

div.radtooltip_TrihydroTelerik div.ToolTipCallout  
{  
    /*display:none;*/ 
    visibilityhidden;  

but when I do this... my output for the tooltip div ends up being...

<div id="ctl00_RadToolTipSiteMap" HideEvent="FromCode" style="display:none; visibility:hidden;"

which doesn't do it either. Is there a way that I can change the way the hidden element is rendered from the RadToolTip control to use 'visibility: hidden' instead?

0
Svetlina Anati
Telerik team
answered on 12 Jan 2009, 11:26 AM
Hi Jess,

I prepared for you sample code which changes the rendered tooltip in the desired manner, with visibility: hidden instead of display:none. In order to do this you should override some of the tooltip methods as shown below:

   <form id="form1" runat="server">  
        <asp:ScriptManager runat="server" ID="ScriptManager1" /> 
        <div> 
 
            <script type="text/javascript">  
 
        TelerikTelerik.Web.UI.RadToolTip.prototype.oldInitialize = Telerik.Web.UI.RadToolTip.prototype.initialize;  
        Telerik.Web.UI.RadToolTip.prototype.initialize = function()  
        {  
          this.oldInitialize();  
          setToolTipVisibility(this.get_element());  
        };  
 
        TelerikTelerik.Web.UI.RadToolTip.prototype._oldCreateUI = Telerik.Web.UI.RadToolTip.prototype._createUI;  
        Telerik.Web.UI.RadToolTip.prototype._createUI = function()  
        {  
           this._oldCreateUI();  
           setToolTipVisibility( this._popupElement);   
        };  
          
        TelerikTelerik.Web.UI.RadToolTip.prototype._oldAfterHide =  Telerik.Web.UI.RadToolTip.prototype._afterHide;  
        Telerik.Web.UI.RadToolTip.prototype._afterHide = function()  
        {  
            this._oldAfterHide();  
           setToolTipVisibility($get('RadToolTipWrapper_' + this.get_id()));                   
        };  
      
        TelerikTelerik.Web.UI.RadToolTip.prototype._oldPlayAnimation =  Telerik.Web.UI.RadToolTip.prototype._playAnimation;  
        Telerik.Web.UI.RadToolTip.prototype._playAnimation = function()  
        {            
            this._oldPlayAnimation();  
            setToolTipVisibility($get('RadToolTipWrapper_' + this.get_id()));                                         
        };          
             
        function setToolTipVisibility(elt)  
        {  
            elt.style.display = "";  
            elt.style.visibility = "hidden";  
            if (Sys.Browser.agent === Sys.Browser.InternetExplorer || this._overlay) {  
            var childFrame = elt._hideWindowedElementsIFrame;  
            if (childFrame) {  
               childFrame.style.visibility = "hidden";                
             }  
            }  
        };  
          
         Telerik.Web.UI.RadToolTip.prototype.isVisible = function()  
      {  
        var popup = this._popupElement;  
        return (popup && popup.style.visibility != "hidden");  
      };  
          
            </script> 
            <asp:HyperLink ID="target" runat="server">Target control</asp:HyperLink> 
            <telerik:RadToolTip Skin="Default" runat="server" ID="RadToolTip1" TargetControlID="target" 
                Position="BottomRight" Width="270px" Height="150px" HideEvent="ManualClose">  
            </telerik:RadToolTip> 
        </div> 
    </form> 

Please, note, that we do not recommend to change the tooltip's rendering in this manner because this can lead to problems due to not being intensively tested and since the design of the control is different and you decide to change it, we do not support future problems which are caused by this change.

Please, also note that when you have visibility:hidden this means that the element is actually on the page despite it is hidden - it will take the same space as it is actually visible.

For your convenience I attached a sample demo page for you and I hope that you will find it helpful.


Best wishes,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
ToolTip
Asked by
Jess Askey
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Jess Askey
Top achievements
Rank 1
Share this question
or