AutoCompleteExtender的立场是错误的Webkit内核 [英] AutoCompleteExtender position is wrong in Webkit

问题描述

我有一个ajaxtoolkit AutoCompleteExtender具有的位置是：绝对的。我已经把它放在一个div里面加上位置是：相对的。这使得扩展下拉地方本身完全可以在所有的浏览器，但在Chrome / Safari浏览器，其中的位置是相对于窗口而不是div的左上角。

当我把另一UL使用相同的CSS类和内联样式是在AutoCompleteExtender生成的HTML，定位工作正常的Chrome浏览器。因此，有专门针对这使得它在呈现的HTML code（刚刚结束标记之前的底部，因此不使用div，因为它计算其位置时，其父扩展器的东西。

任何想法，我能做些什么来解决这个问题？

code：

 ＆LT; D​​IV CLASS =搜索＆GT;
＆LT; ajaxToolkit：AutoCompleteExtender
            =服务器
            ID =biznameOrCategoryAutoComplete
            的TargetControlID =txtBizNameOrCategory
            ServicePath =〜/ AutoComplete.asmx
            ServiceMethod =GetBiznameOrCategoryCompletionList
            最低prefixLength =1
            CompletionInterval =1000
            EnableCaching =真
            CompletionSetCount =10
            CompletionListCssClass =autocomplete_completionCompyNameListElement
            CompletionListItemCssClass =autocomplete_listItem
            CompletionListHighlightedItemCssClass =autocomplete_highlightedListItem
            ShowOnlyCurrentWordInCompletionListItem =真正的＆GT;
        ＆LT; / ajaxToolkit：AutoCompleteExtender＆GT;
＆LT; / DIV＆GT;
 

CSS：

  .searching {
保证金左：5像素;
填充顶：10px的;
宽度：366px;
位置：亲属;
}
.autocomplete_completionCompyNameListElement {
背景：#FFF;
字体-family：宋体，黑体，无衬线;
字体大小：17px;
！宽度：340px重要的;
左：20px的重要;！
边界：1px的固体＃d9d9d9;
字体大小：12px的;
顶：48像素很重要;
填充：2px的4PX重要的;
}
 

解决方案

尝试添加纯HTML ＆LT; D​​IV＆GT; 扩展与spcified ID 属性，并使用该 ID 价值扩展的 CompletionListElementID 属性。

当你传递一个 ID 的扩展，将插入的项目，如＆LT; D​​IV＆GT; 元素。因此，增加一个普通的HTML ＆LT; D​​IV＆GT; ，而不是＆LT; UL＆GT; 保持有效的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.

这篇关于AutoCompleteExtender的立场是错误的Webkit内核的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！