我有一个ajaxtoolkit AutoCompleteExtender,其位置:绝对。我已将其放置在 div 中,位置为:relative。这使得扩展器下拉列表可以完美地放置在所有浏览器上,除了 Chrome/Safari,其位置是相对于窗口的左上角而不是 div。
当我放置另一个具有与为 AutoCompleteExtender 生成的 HTML 相同的 css 类和内联样式的 ul 时,定位在 Chrome 中工作正常。因此,扩展器有一些特定的东西,使其在 HTML 代码的底部呈现(就在结束标记之前,因此在计算其位置时不使用 div 作为其父级。
我能做些什么来解决这个问题吗?
代码:
<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;
}
尝试在具有指定
<div>
属性的扩展器之后添加纯 HTML id
元素,并使用此 id
值作为扩展器的 CompletionListElementID
属性。
当您将
id
传递给扩展器时,它会将项目作为 <div>
元素插入。因此,添加纯 HTML <div>
而不是 <ul>
可以保持有效的 HTML。
这在 Chrome 中对我来说绝对有效,ID“myExtender”必须在 DIV 和 AutoCompleteExtender 中匹配:
<asp:AutoCompleteExtender ID="tbNazevPolozky_AutoCompleteExtender" runat="server" CompletionListCssClass="completionList"
CompletionListItemCssClass="completionListItem" CompletionListHighlightedItemCssClass="completionListHighlightedItem"
Enabled="True" ServiceMethod="NaseptejPolozky" TargetControlID="tbNazevPolozky" UseContextKey="True" CompletionInterval="200" MinimumPrefixLength="1" CompletionSetCount="100" ShowOnlyCurrentWordInCompletionListItem="True" CompletionListElementID="myExtender">