2012-02-01 5 views
5

내 페이지에 제대로 작동하는 AutoCompleteExtender가 있지만 페이지를 아래로 스크롤하여 사용하면 제안이 잘못된 (수직) 위치에 표시됩니다.
Safoor & Chrome에서는 발생하지만 IE & FF에서는 발생하지 않으므로 웹킷의 잘못이라고 생각됩니다.
을 Heres 코드 :페이지를 아래로 스크롤 한 후 웹킷 브라우저에서 AutoCompleteExtender의 위치가 잘못되었습니다.

<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에 this & this 솔루션을 시도했지만 아무도 일하지.
해결 방법?

업데이트 :
Microsoft의 the simplest example에도이 문제가 있습니다. 일부 <p> 요소를 텍스트 상자 & Extender 전후에 추가하여 스크롤 영역을 만들고 테스트합니다. 위의 링크에서 GetCompletionList에 대한

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

가져 오기 코드입니다. 이 문제는 쉽게 재현 할 수 있습니다.

+0

내가는이 자동 완성을 한 사람에 의해 이루어져야한다고 생각합니다. 문제는 최종 렌더라고 생각합니다. 드롭하는 메뉴는 텍스트 상자가있는 div 안에 있지 않으며 CSS도 수정해야합니다. – Aristos

답변

6

나는 solution on Asp.net forums을 발견했다. Extender의 OnClientShown 이벤트에

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

+0

아직도 $ common이 무엇인지 궁금합니다! Sys.UI.DomElement 클래스의 인스턴스입니까? –

+3

tb.clientHeight insted를 20 "magic number"로하는 것이 더 좋습니다. – aleyush

관련 문제