ASP.NET Ajax - Autocompleteextender control appears behind other controls

Question

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.

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.

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

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