AutoCompleteExtender имеет неправильную позицию для браузеров webkit после прокрутки вниз страницы - PullRequest
Новая
       7

AutoCompleteExtender имеет неправильную позицию для браузеров webkit после прокрутки вниз страницы

5 голосов
/ 02 февраля 2012

У меня есть AutoCompleteExtender на моей странице, который работает нормально, но когда я прокручиваю страницу вниз и использую ее, предложения появляются в неправильном (вертикальном) положении.
Это происходит с Safari и Chrome, но не с IE и FF, и поэтому я подумал, что это может быть ошибка WebKit.
Вот код: 

<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>

Я пробовал это & это решения на SO, но ни одно не помогло.
Как это исправить?

Обновление:
Даже в простейшем примере от 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 по ссылке выше. Эта проблема легко воспроизводима.

1 Ответ

6 голосов
/ 02 февраля 2012

Я нашел решение на форумах 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 Экстендера

...