Scriptaculous autocompleter result list position problem

Question

I am using Scripatculous Autocompleter 1.9.0. My problem is that the position of the result list div is incorrect in Chrome and Firefox, but works in IE. The result list div appears on top of the text box. I was able to modify controls.js and fix the problem, but I am wondering if I am doing something wrong with the style sheet. Here is my code:

style.css:
div#autocomplete
{
  position: relative;
}

input#query {
  width:500px;
}

div#answerlist {
  width:500px;
  max-height:700px;
  overflow-y:scroll;
  overflow-x:auto;
  border:1px solid #CCCCCC;
}

index.phtml:

<div id="webphone" style="width: 1000px">
<center>
<label>Search:</label>
<input type="text" name="query" id="query"></input>
</center>
<div id="answerlist"></div>
</div>

<script type="text/javascript">
new Ajax.Autocompleter("query","answerlist","index/search", {frequency: 0.5, minChars: 1});
</script>

I tried un-nesting the divs and many other variations of "position" options for all elements. Nothing worked.

Then, I started playing with controls.js Autocompleter.create function, and the onShow function:

 controls.js:

 function(element, update){
    if(!update.style.position || update.style.position=='absolute') {
      /***alert(update.style.position);***/
      update.style.position = 'absolute';
      Position.clone(element, update, {
       setHeight: false,
        offsetTop: element.offsetHeight
      });
    }
    Effect.Appear(update,{duration:0.15});
  };

First, the alert function always returns an empty string, even if I explicitly set the position style of answerlist to relative or absolute. Second, even though the script explicitly makes the position absolute and positions the element, the final position is incorrect! Am I the only one experiencing this? I tried many versions of chrome and firefox, on both linux and windows. I must be doing something wrong. Of course I can fix the problem by commenting out this part of the code and positioning the div element using absolute positioning. But I prefer not to do that...

Answer 1

After struggling with the same issue, I found the solution and opened a ticket at https://prototype.lighthouseapp.com/projects/8886/tickets/1286-error-in-elementcloneposition#ticket-1286-1

The fix is described there, but basically, Element.clonePosition has the following:

if (parent == document.body) {
    delta[0] -= document.body.offsetLeft;
    delta[1] -= document.body.offsetTop;
}

That has to be replaced by:

if (parent == document.body) {
    var parentOffset = Element.viewportOffset(parent);
    delta[0] -= parentOffset[0];
    delta[1] -= parentOffset[1];
}