ASP.NET Ajax-自动完成扩展器控件出现在其他控件的后面 [英] ASP.NET Ajax - Autocompleteextender control appears behind other controls

问题描述

具体来说，我有一个搜索表单，其顶部有一个autocompleteextender.当您键入字符串时，它会自动完成并在匹配项中按预期显示匹配项.

To be specific I have a search form with an autocompleteextender at the top. When you type in a string, it autocompletes with matches in a drop down as expected.

问题是，在表格的最下方有几个SliderExtender控件出现在自动完成下拉菜单的上方(它不覆盖这些控件).

The problem is that a couple of SliderExtender controls further down the form are appearing above the autocomplete dropdown (it is not covering these controls).

我环顾四周，但找不到答案.看来其他控件可能会出现此问题，而并非特定于这些控件.

I've looked around but can't find an answer yet. It seems that the problem can occur with other controls and not specific to these.

推荐答案

我找到了一个对我有用的简单答案，但我却忽略了.我只是在AutoCompleteExtender的CSS类中将定位切换为绝对定位，然后为其设置了Z-Index.现在，自动完成的建议列表将显示在所有其他元素的上方.

I found a simple answer which works for me and I'd overlooked. I just switched the positioning to absolute in the CSS class for the AutoCompleteExtender and then set the Z-Index for it. The suggestion list for the autocomplete now appears above all other elements.

.aspx中的控制代码 我已经应用了自己的CSS:

Code for control in .aspx I have applied my own 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;
}

这篇关于ASP.NET Ajax-自动完成扩展器控件出现在其他控件的后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！