Неверное положение AutoCompleteExtender в Webkit

У меня есть AutoCompleteExtender ajaxtoolkit с position: absolute. Я поместил его в div с позицией: относительная. Благодаря этому раскрывающийся список расширителя идеально размещается во всех браузерах, кроме Chrome/Safari, где положение определяется относительно верхнего левого угла окна, а не div.

Когда я помещаю другой ul с тем же классом css и встроенным стилем, что и HTML, созданный для AutoCompleteExtender, позиционирование отлично работает в 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;
}

css ajax asp.net ajaxcontroltoolkit autocompleteextender
person Peter Evjan    schedule 01.12.2011    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Попробуйте добавить простой элемент HTML <div> сразу после расширителя с указанным атрибутом id и используйте это значение id для свойства CompletionListElementID расширителя.

Когда вы передаете id расширителю, он вставит элементы как <div> элементов. Таким образом, добавление простого HTML <div> вместо <ul> поддерживает действительный HTML.

person Yuriy Rozhovetskiy    schedule 01.12.2011
comment
Эй, у меня такая же проблема с этой позицией расширителя, т.е. я пытался сделать то, что вы предложили, но нет никакой разницы stackoverflow.com/questions/9288125/ - person ONYX; 15.02.2012
comment
Когда вы передаете идентификатор CompletionListElementID, элементы, которые вставляются в этот элемент, представляют собой элементы div. Я отредактировал ваш ответ, чтобы предложить вставить <div> вместо <ul>, чтобы сохранить действительный HTML. - person Alan Whitelaw; 03.08.2012