Inside my project I am using the Ajax Auto Complete Extender v2.0.50727 and it works fine for all textboxes in IE8, Opera, and Chrome, but when it comes to IE9 inside iframes its display position is totally giving me headaches. Instead of appearing just below the textbox, it appears 100px below, like here. The CSS class I am using is:
<asp:TextBox ID="txtAddCriteria" runat="server" MaxLength="100" Width="325px" CssClass="TextInput"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender runat="server" ID="aceCriteria" TargetControlID="txtAddCriteria" ServiceMethod="GetCriteriaList4AutoCompleteExtender" ServicePath="MyWebService.asmx" MinimumPrefixLength="1" CompletionInterval="100" EnableCaching="true" ContextKey="0" UseContextKey="true" CompletionListCssClass="AutoExtender" />
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
margin : 0px !important;
font-weight: normal;
border:solid 1px #006699;
line-height:20px;
padding:0px;
background-color:White;
}
This happens to me only inside iframes in IE9. Is there any workaround? Many thanks!