cssgoogle-chromepositionautocompleteextender

AutoCompleteExtender positioning for Chrome ONLY

AutoCompleteExtender positioning doesn't work in Google Chrome. Works fine in IE though.

Please see the image attached. In IE the style is in inline element and nothing appears on element style in google chrome.

The Ajax list appears on the top instead of below Company Name's textbox.

<span class="SingleLineTextInput">Company name</span><asp:TextBox ID="CompanyNameTextBox"     CssClass="SingleLineTextInput" runat="server"></asp:TextBox>
<div id="completionList"></div>

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" 
runat="server" 
MinimumPrefixLength="1" TargetControlID="CompanyNameTextBox"
CompletionListElementID="completionList"
 ServiceMethod="GetProviderCompletionList" 
ServicePath="~/Services/ProviderSelectorService.asmx"
CompletionInterval="500" 
CompletionSetCount="20"
CompletionListCssClass="completionList"
OnClientPopulated="AutoCompleteClientPopulated" OnClientItemSelected="AutoCompleteItemSelectedHandler" />

Can anyone help in this please?

Solution

  • I fixed it by entering below in my CSS:

    @media screen and (-webkit-min-device-pixel-ratio:0) { div#completionList { width: 350px !important; top: 1134px !important; } }

    Thanks for the views people! :)