AutoCompleteExtender positioning menu incorrectly when scrolled

Question

We have an AutoCompleteExtender linked to a TextBox. Both controls are placed inside an UpdatePanel, and the UpdatePanel is displayed as a pop-up dialog using a Javascript library (Ext.BasicDialog).

The pop-up is a div on the page, not a separate window. The problem is that when the user scrolls inside the pop-up, the AutoCompleteExtender shows its menu in the wrong place. It looks like it is taking the visible distance from the top of the popup and positioning the menu from the top of the inner html of the popup (which is not visible)

We are using Version 1.0.20229.20821 of the AjaxControlToolkit, and we are targetting ASP.NET Framework vewrsion 2.0.

I have tried to fix the menu by attaching the following Javascript to the OnClientShown event, but it pretty much does the same thing:

function resetPosition(object, args) {

    var tb = object._element; // tb is the associated textbox.
    var offset = $('#' + tb.id).offset();

    var ex = object._completionListElement;
    if (ex) {
        $('#' + ex.id).offset(offset);
    }  
} 

Answer 1

I fixed this by setting position:relative on a div containing the TextBox and the auto-complete extender. The extender must have been using the wrong element to position on when inside the popup panel.

Answer 2

Add an empty <div id="AutoCompleteContainer"></div> element right after the AutoCompleteExtender. In AutoCompleteExtender, add an attribute pointing to this container, CompletionListElementID="AutoCompleteContainer". The list items should be contained in that div then.

Answer 3

I know this is an old post, but thought this information may help someone else. There is a newer version 15.x of the Ajaxtoolkit now (April 2015) and it fixes this issue. From my reading the CompletionListElementID property was deprecated some time ago, and at the least seems to behave differently in different versions. I upgraded my references to the 15.x version and it just started working as needed.