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
?
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.