Question

I am using the AJAX autocomplete add-on to the <asp:textbox> control. I have everything working with a <div> around the <ajaxToolkit:AutoCompleteExtender>.

I set the following CSS class:

.autocomplete_CompletionListElement
{
    margin: 0px;
    background-color: White;
    cursor: default;
    overflow-y: auto;
    overflow-x: hidden;
    height:180px;
    text-align: left;
    border: 1px solid #777;
    z-index:10000;
}

Right now, when the list contains a reasonable amount of items, a vertical scrollbar appears (which is correct) and I can scroll through the drop down which is set to a height of 180px in the CSS (as seen above).

However, when there are only 1 or 2 items in the drop down, the height remains fixed at 180px with the 2 items and blank white space below. What I would ideally want is that the AJAX drop down would shrink to fit the height of its contents. If the contents are more than 180px, then the scrollbar should appear (as it is doing now).

Answer 1

Remove height:180px and change the CSS to use something like:

max-height:180px;

That should work (but I think only from IE7+) the other browsers should support it ok.