ASP.NET Ajax - элемент управления Autocompleteextender появляется позади других элементов управления - PullRequest
Новая
       10

ASP.NET Ajax - элемент управления Autocompleteextender появляется позади других элементов управления

1 голос
/ 05 июня 2009

Если быть точным, у меня есть форма поиска с автозаполнением в верхней части. Когда вы вводите строку, она автоматически заполняется совпадениями в раскрывающемся списке, как и ожидалось.

Проблема в том, что несколько элементов управления SliderExtender, расположенных ниже по форме, появляются над выпадающим меню автозаполнения (оно не охватывает эти элементы управления).

Я оглянулся, но пока не могу найти ответ. Кажется, что проблема может возникнуть с другими элементами управления, а не только для них.

1 Ответ

8 голосов
/ 05 июня 2009

Я нашел простой ответ, который работает для меня, и я упустил из виду. Я просто переключил абсолютное позиционирование в классе CSS для AutoCompleteExtender и затем установил для него Z-индекс Список предложений для автозаполнения теперь отображается над всеми остальными элементами.

Код для управления в .aspx Я применил свой собственный CSS: 

<cc1:AutoCompleteExtender ID="componentID_AutoCompleteExtender" runat="server" 
        TargetControlID="componentID"
        ServicePath="ImageComponentService.asmx" 
        ServiceMethod="GetComponentMatches"
        MinimumPrefixLength="3" 
        CompletionInterval="1000"
        EnableCaching="true" 
        CompletionSetCount="10" 
        CompletionListCssClass="CompletionListCssClass"
        CompletionListItemCssClass="CompletionListItemCssClass" 
        CompletionListHighlightedItemCssClass="CompletionListHighlightedItemCssClass" 
        OnClientItemSelected="itemSelected"
        Enabled="true" FirstRowSelected="true"
        BehaviorID="AutoCompleteEx">
    </cc1:AutoCompleteExtender>

CSS 

.CompletionListCssClass
{
    font-size: 11px;
    color: #000;
    padding: 3px 5px;
    border: 1px solid #999;
    background: #fff;
    width: 300px;
    float: left;
    z-index: 1;
    position:absolute;
    margin-left:0px;
}
...