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.
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.