AutoCompleteExtender has wrong position, for webkit browsers, after scrolling down the page

Question

I have an AutoCompleteExtender on my page which works fine but when I scroll down the page and use it, suggestions show up at wrong (vertical) position.
It happens with Safari & Chrome but not with IE &FF and so I thought it could be webkit's fault.
Heres the code:

<td>
      <div style="position: relative;">
           <asp:TextBox ID="DepartureAirportTextBox" runat="server" CssClass="DepartureAirport airport-textbox"
                            onblur="javascript:DepartureLostFocus();" onkeydown="javascript:DepartureChanged(event);"></asp:TextBox>
            <asp:Panel ID="DepartureAutocompleteDropDownPanel" runat="server" ScrollBars="Vertical"
                            CssClass="autocomplete-panel" Style="display: none;" />
            <AjaxControlToolkit:AutoCompleteExtender ID="DepartureAirportAutoComplete" runat="server"
                            TargetControlID="DepartureAirportTextBox" CompletionSetCount="200" ServicePath="../WebServices/SecureService.asmx"
                            ServiceMethod="ListAirports" MinimumPrefixLength="3" BehaviorID="DepartureAirport"
                            CompletionListElementID="DepartureAutocompleteDropDownPanel" OnClientItemSelected="SelectDepartureAirport"
                            OnClientPopulating="ShowDepartureIcon" OnClientPopulated="HideDepartureIcon">
           </AjaxControlToolkit:AutoCompleteExtender>               
     </div>
</td>

I have tried this & this solutions on SO, but none worked.
How to fix it?

Update:
Even the simplest example from Microsoft has this problem. Add some <p> elements before and after the textbox & extender to create scrollable area and test it.

<asp:TextBox ID="txtMovie" runat="server"></asp:TextBox>
        <AjaxControlToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" TargetControlID="txtMovie"
            runat="server" UseContextKey="True" MinimumPrefixLength="2" ServiceMethod="GetCompletionList" />

Get code for GetCompletionList from above link. This issue is so easily reproducible.

I think that this must be made by the one that have made this autocomplete. I think the issue is the final render, the menu that drops is not inside a div with the text box and the css need fix also. — Aristos, Feb 01 '12 at 22:54

Null Head · Accepted Answer · 2012-02-02T22:27:10.313

I found a solution on Asp.net forums.

function resetPosition(object, args) {
    var tb = object._element;
    var tbposition = findPositionWithScrolling(tb);
    var xposition = tbposition[0];
    var yposition = tbposition[1] + 20; // 22 textbox height 
    var ex = object._completionListElement;
    if (ex)
        $common.setLocation(ex, new Sys.UI.Point(xposition, yposition));
}
function findPositionWithScrolling(oElement) {
    if (typeof (oElement.offsetParent) != 'undefined') {
        var originalElement = oElement;
        for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
            posX += oElement.offsetLeft;
            posY += oElement.offsetTop;
            if (oElement != originalElement && oElement != document.body && oElement != document.documentElement) {
                posX -= oElement.scrollLeft;
                posY -= oElement.scrollTop;
            }
        }
        return [posX, posY];
    } else {
        return [oElement.x, oElement.y];
    }
}

Call resetPosition on Extender's OnClientShown event

Still wondering what the $common is! Is it an instance of Sys.UI.DomElement class? — Null Head, Feb 03 '12 at 03:50

AutoCompleteExtender has wrong position, for webkit browsers, after scrolling down the page

1 Answers1