ASP.NET Ajaxcontroltoolkit Autocomplete Ul Overlay Issue

I have a following snippet of code in my ASP.NET application (simplified):

Solution 1:

I found one possible solution based on Javascript:

1) Modify autocomplete_completionListElements CSS class - remove height : 130px; property.

.autocomplete_completionListElementy
{ 
    overflow : auto;
    list-style-type : none;
}

2) Assign Javascript handlers to following AutoCompleteExtender properties: OnClientShown, OnClientHidden

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
                                                      CompletionListCssClass="autocomplete_completionListElements" 
                                                        CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" 
                                                        CompletionListItemCssClass="autocomplete_listItem" 
                                                        CompletionSetCount="20" 
                                                        DelimiterCharacters=";, :" 
                                                        Enabled="True"
                                                        MinimumPrefixLength="2" 
                                                        ServiceMethod="GetCompletionList" 
                                                        ServicePath="Rec.asmx" 
                                                        ShowOnlyCurrentWordInCompletionListItem="True" 
                                                        TargetControlID="RecTextBox" 
                                                        OnClientShown="autocompleteClientShown"
                                                        OnClientHidden="autocompleteClientHidden" />   

3) Javascript handlers code:

function autocompleteClientShown(source, args) {

    source._popupBehavior._element.style.height = "130px";
}

function autocompleteClientHidden(source, args) {

    source._popupBehavior._element.style.height = "0px";

}

Share