Geek Answers Handbook

AutoCompleteExtender has the wrong position for web browsers after scrolling a page

I have an AutoCompleteExtender on my page that works fine, but when I look at the page and use it, the sentences appear in the wrong (vertical) position.
This happens with Safari and Chrome, but not with IE & FF, and so I thought it might be a webkit error.
Here is 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 tried this and this solution on SO, but no one worked.
How to fix it?

:
Microsoft . <p> , .

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

GetCompletionList . .

+5
1

Asp.net.

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];
    }
}

resetPosition OnClientShown

+6

More articles:


All Articles