I have an ajaxtoolkit AutoCompleteExtender that has position: absolute. I have placed it inside a div with position: relative. This makes the extender dropdown place itself perfectly on all browsers, except on Chrome/Safari, where the position is relative to the top left of the window instead of the div.
When I place another ul with the same css class and inline style as the HTML that is generated for the AutoCompleteExtender, the positioning works fine in Chrome. So there is something specific to the extender that makes it render at the bottom of the HTML code (just before the end tag, and therefore not using the div as it's parent when calculating its position.
Any ideas what I can do to fix this?
Code:
<div class="searching">
<ajaxToolkit:AutoCompleteExtender
runat="server"
ID="biznameOrCategoryAutoComplete"
TargetControlID="txtBizNameOrCategory"
ServicePath="~/AutoComplete.asmx"
ServiceMethod="GetBiznameOrCategoryCompletionList"
MinimumPrefixLength="1"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="10"
CompletionListCssClass="autocomplete_completionCompyNameListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
ShowOnlyCurrentWordInCompletionListItem="true">
</ajaxToolkit:AutoCompleteExtender>
</div>
CSS:
.searching {
margin-left:5px;
padding-top:10px;
width:366px;
position: relative;
}
.autocomplete_completionCompyNameListElement {
background: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size: 17px;
width: 340px !important;
left: 20px !important;
border: 1px solid #d9d9d9;
font-size: 12px;
top: 48px !important;
padding: 2px 4px !important;
}
Try to add plain HTML <div>
element right after extender with spcified id
attribute and use this id
value for extender's CompletionListElementID
property.
When you pass an id
to the extender it will insert the items as <div>
elements. So adding a plain HTML <div>
rather than a <ul>
maintains valid HTML.