ASP.NET Ajax - 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.

具体来说,我在顶部有一个带有autocompleteextender的搜索表单。键入字符串时,它会按预期自动填充下拉列表中的匹配项。

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).

问题是表单下方的一些SliderExtender控件出现在自动完成下拉列表上方(它没有覆盖这些控件)。

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.

我环顾四周但还没找到答案。似乎问题可能发生在其他控件上,而不是特定于这些控件。

1 个解决方案

#1

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.

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

Code for control in .aspx I have applied my own CSS:

.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;
}