I have an autocompleteextender in my web application. When the user uses the Up and Down arrows of the keyboard to navigate through the list items, sometimes the item in focus would be outside of the scroll view range. How can I set the listbox to automatically scroll if "most" of the item is not visible in the current scrolling view ?
This is the CSS I apply on the control:
<style type="text/css">
/*AutoComplete flyout */
.completionList {
border:solid 1px #444444;
margin:0px;
padding:0px;
height: 143px;
overflow:auto;
background-color: #FFFFFF;
}
.listItem {
display: block;
padding: 5px 5px;
border-bottom: 1px solid #DDD;
font-size:small;
font-style:normal;
font-weight:400;
}
.itemHighlighted {
background-color: lightgray;
display: block;
padding: 5px 5px;
font-size:small;
border-bottom: 1px solid #DDD;
}
</style>
This is the control:
<ajaxToolkit:AutoCompleteExtender ID="ACSource" runat="server" TargetControlID="txtSource_Type" ServiceMethod="AutoCompleteSourceType" CompletionListCssClass="completionList"
CompletionListHighlightedItemCssClass="itemHighlighted" CompletionListItemCssClass="listItem" MinimumPrefixLength="1"
OnClientItemSelected="SourceTypeSelected" ></ajaxToolkit:AutoCompleteExtender>