问题描述
我有一个 ajaxtoolkit AutoCompleteExtender,其位置为:绝对.我把它放在一个 div 中,位置为:relative.这使得扩展器下拉菜单可以完美地放置在所有浏览器上,除了 Chrome/Safari,其位置相对于窗口的左上角而不是 div.
当我放置另一个与为 AutoCompleteExtender 生成的 HTML 具有相同 css 类和内联样式的 ul 时,定位在 Chrome 中工作正常.所以有一些特定于扩展器的东西使它呈现在 HTML 代码的底部(就在结束标记之前,因此在计算其位置时不使用 div 作为它的父级.
有什么想法可以解决这个问题吗?
代码:
<ajaxToolkit:AutoCompleteExtenderrunat="服务器"ID="biznameOrCategoryAutoComplete"TargetControlID="txtBizNameOrCategory"ServicePath="~/AutoComplete.asmx"ServiceMethod="GetBiznameOrCategoryCompletionList"最小前缀长度=1"完成间隔=1000"启用缓存=真"CompletionSetCount="10"CompletionListCssClass="autocomplete_completionCompyNameListElement"CompletionListItemCssClass="autocomplete_listItem"CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"ShowOnlyCurrentWordInCompletionListItem="true"></ajaxToolkit:AutoCompleteExtender>
CSS:
.searching {左边距:5px;填充顶部:10px;宽度:366px;位置:相对;}.autocomplete_completionCompyNameListElement {背景:#fff;字体系列:Arial、Helvetica、sans-serif;字体大小:17px;宽度:340px!重要;左:20px!重要;边框:1px 实心 #d9d9d9;字体大小:12px;顶部:48px!重要;填充:2px 4px !重要;}
尝试在扩展器之后添加纯 HTML
id
属性并使用此 id
值用于扩展程序的 CompletionListElementID
属性.当您将 id
传递给扩展程序时,它会将项目作为
而不是
可以保持有效的 HTML.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.
这篇关于Webkit 中的 AutoCompleteExtender 位置错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!