Display hover using LookupHoverDetail along with scrollable outputpanel

I'm trying to create a pageblocktable that uses lookuphoverdetails to display the mini page details for Accounts on a custom object.

The problem that I'm experiencing is that the pageblocktable is contained inside a scrollable outputpanel.

When the user scrolls down the table the hover shows up towards the bottom of the page where the row would have existed if it wasn't inside the scrollable outputpanel.

Has anyone exeperienced this issue? It looks like the VF Page creates hidden entries for the lookup hovers that are down the bottom of the page.

Here is the sections of the page that has the problem:

<style type="text/css">     .tableContainer     {         height:200px;          width: 100%; 

// overflow: auto; overflow: scroll; -webkit-overflow-scrolling: touch; }

...

                        <!-- Order Field Set -->                         <apex:repeat var="f" value="{!$ObjectType.Order_Credit__c.FieldSets.OrderSearch}">                             <apex:column id="colField">                                  <apex:facet name="header" >                                     <apex:commandlink action="{!Search}"  value="{!f.label}" rerender="SearchCriteria,pageResult" onclick="LockScreen('Searching...');" oncomplete="UnlockLockScreen();" >                                         <apex:image url="{!URLFOR($Resource.VFIcons,'col-move-bottom.gif')}" rendered="{!UPPER(sortExpression)==UPPER(f.fieldpath) && sortDirection= 'ASC'}"/>                                         <apex:image url="{!URLFOR($Resource.VFIcons,'col-move-top.gif')}" rendered="{!UPPER(sortExpression)==UPPER(f.fieldpath) && sortDirection = 'DESC'}"/>                                         <apex:param value="{!f}" name="column" assignTo="{!sortExpression}" ></apex:param>                                     </apex:commandlink>                                  </apex:facet>                                  <apex:outputPanel rendered="{!f.fieldPath=='Name'}" >                                        <a href="/{!o.Order.Id}" id="{!o.Order.Id}" target="_blank" onblur="LookupHoverDetail.getHover('{!o.Order.Id}').hide();"                                         onfocus="LookupHoverDetail.getHover('{!o.Order.Id}', '/{!o.Order.Id}/m?retURL=%2F{!o.Order.Id}&isAjaxRequest=1').show();"                                         onmouseout="LookupHoverDetail.getHover('{!o.Order.Id}').hide();"                                         onmouseover="LookupHoverDetail.getHover('{!o.Order.Id}', '/{!o.Order.Id}/m?retURL=%2F{!o.Order.Id}&isAjaxRequest=1').show();">                                        {!o.Order.Name}                                     </a>                                  </apex:outputPanel> 

...

Replay

Category: visualforce Time: 2013-06-27 Views: 7

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.577 (s). 12 q(s)