suggestionBox within a scrollable div

[snnyannd]

I have a modalPanel that contains a dataTable within a scrollable div. One column of the dataTable has inputText with a suggestion box for each row. When the dataTable is scrolled, the suggestion box pops up at the absolute position of the row and not the relative position of the inputText. Therfore when you scroll to the the elements low down the list the suggestionbox is moves out of the page.

Is there any way to fix this other than using JavaScript to find the absolute position

<a4j:outputPanel id="_mpnlConnectorProcessesWrapper"
layout="block"
style="width:600px;height:250px;overflow:auto;clear:both;position:relative;">

<a4j:form ajaxSubmit="true">
<rich:dataTable value="#{bean.targetFields}" var="tgt">
<rich:column style="width:400px;">
<t:inputText id="selectedField"
value="#{tgt.sourceField}"/>
<rich:suggestionbox width="200" height="100" for="selectedField" nothingLabel="No Fields Found" cellpadding="0" cellspacing="0" minChars="3" suggestionAction="#{bean.findMatchingFields}" var="fieldName">
<h:column>
<h:outputText value="#{fieldName}"/>
</h:column>
</rich:suggestionbox>
</rich:column>
<rich:column style="width:200px;">
<t:outputText value="#{tgt.targetField}"/>
</rich:column>
</rich:dataTable>
</a4j:form>
</a4j:outputPanel>

[jits_1998]

We have raised an issue on support site for calendar. But we have a workaround for calendar but none for this. If no one responds and I get a solution will update you.

[snnyannd]

Posting a workaround using JavaScript

function setAutoCompleteFramePosition(oFrame){
scrollDiv = document.getElementById("parentDiv");
scrollPosition = scrollDiv.scrollTop;
popupDiv = document.getElementById(oFrame.popup);
popupTop = popupDiv.style.top;
intPopupTop = popupTop.substring(0,popupTop.length - 2);
topPosition = intPopupTop - scrollPosition;
popupDiv.style.top = topPosition + "px";
}

you can call this function when the oncomplete event is raised in the suggestionBox i.e.

<rich:suggestionBox ....
oncomplete="setAutoCompleteFramePosition(this)"
.../>



The "parentDiv" is the id of the scrollable div.

Hope this helps someone

[damianharvey]

I have the same problem (Richfaces 3.1.3.GA, Seam 2.0.1)

I've written some a page to test this and anytime that the suggestionbox is not in the main view then this problem occurs. The same issue affects the suggestionbox used in a modal when the button used to launch the modal is similarly positioned in a scrolling div or reRendered fragment further down the page.

For me it makes the suggestionbox very difficult to use. Unfortunately the script provided by snnyannd did not work for me. I'll have to dig into why now.

Is this related to JIRA http://jira.jboss.org/jira/browse/RF-1920?

Here's the the basic page structure that will reproduce the problem:

<s:div style="height:300px;overflow:scroll;padding:5px;">
 <s:div style="border:1px solid red;height:800px;width:400px;">
 hello
 </s:div>
 <h:inputText
 id="testSuggestion"
 value="#{testBean.countryStr}"
 size="40">
 </h:inputText>
 <rich:suggestionbox
 for="testSuggestion"
 suggestionAction="#{testBean.suggest}"
 selfRendered="true"
 var="countryCode"
 fetchValue="#{countryCode.countryName}"
 width="300"
 height="200"
 minChars="2"
 ajaxSingle="true"
 cellpadding="2">
 <h:column>
 <h:outputText value="#{countryCode.countryName}"/>
 </h:column>
 </rich:suggestionbox>
</s:div>

Cheers,

Damian.