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:AutoCompleteExtenderID="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