Webkit 中的 AutoCompleteExtender 位置错误 [英] AutoCompleteExtender position is wrong in Webkit

问题描述

我有一个 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

而不是

可以保持有效的 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 位置错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！