Issue with AutoCompleteExtender rendering

Question

I am using AutoCompleteExtender in my application and somehow the the suggestion box started appearing not right under the text box but rather 20-30 pixels below. After digging through the generated HTML i noticed that it renders as UL and LI elements, while in the samples downloaded from ASP.NET it renders as DIV inside DIV and works fine.

I can't figure out what makes it render differently. How do i display the suggestion list right under the textbox?

By the way it looks fine in IE, the issue exists only in firefox.

Answer 1

You're going to have to play with your CSS. The default (from the sample) is:

visibility : hidden;
margin : 0px !important;
background-color : #f0f0f0;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
cursor : 'default';
overflow : auto;
height : 200px;
text-align : left; 
list-style-type : none;

I added on one of my sites for example:

.autocomplete_completionListElement li
{  
    margin : 0px !important;
    padding: 2px;
}

But you'll want to use something like Firebug to figure what rule you have that is getting applied to it that you don't want to be. Remember, CSS = Cascading style sheets, so parent elements or rules can affect library elements like this.