3 Replies Latest reply on Jan 16, 2008 9:26 PM by Damian Harvey

    suggestionBox within a scrollable div

    Sunny Anand Newbie

      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>

        • 1. Re: suggestionBox within a scrollable div
          Jitendra Singh Newbie

          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.

          • 2. Re: suggestionBox within a scrollable div
            Sunny Anand Newbie

            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

            • 3. Re: suggestionBox within a scrollable div
              Damian Harvey Master

              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.