Question

I have a TextBox with an Ajax Control Toolkit AutoCompleteExtender, and I’m having some issues with the formatting.

If I omit the CompletionListCssClass, CompletionListItemCssClass, CompletionListHighlightedItemCssClass values, it displays fine. But I just need to align the autocomplete text to the left, and the size of the TextBox.

If I set these values in the site.css:

.autocomplete_listItem
{
    background-color: #222;
    color: #cfdbe6;
}

.autocomplete_highlightedListItem
{
    background-color: #999;
    color: #111;
}

.autocomplete_completionListElement
{

}

then I bullets on the list.

How do I make the bullets not show, align the list to be right under the TextBox, the list items left aligned, and the size to match the TextBox?

Answer 1

All you need to do to remove the bullets is add list-style-type:none to each of your classes:

.autocomplete_listItem
{
    background-color: #222;
    color: #cfdbe6;
    list-style-type:none;
}

.autocomplete_highlightedListItem
{
    background-color: #999;
    color: #111;
    list-style-type:none;
}

.autocomplete_completionListElement
{
    list-style-type:none;
}

This is because the autocomplete results are returned as a bulleted list by the AJAX extender – so if you customize the style, you need to make sure and hide those bullets.

In order to tell you how to align it properly with other elements, I would need to see your markup (which is not included in your question).