Неправильная позиция AutoCompleteExtender в Webkit - PullRequest
Новая
       32

Неправильная позиция AutoCompleteExtender в Webkit

4 голосов
/ 01 декабря 2011

У меня есть ajaxtoolkit AutoCompleteExtender, который имеет положение: абсолютное.Я поместил его в 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;
}

1 Ответ

6 голосов
/ 01 декабря 2011

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

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

...