Vijay Negi: Simple Css Style For AJAX AutoComplete Extender

Wednesday, 18 April 2012

Simple Css Style For AJAX AutoComplete Extender

AJAX: Simple CSS For AutoComplete Extender

 I know your AutoComplete Extender is working fine,but the thing is you are not happy with its presentation when its showing generating list in 20px padding difference with a bullet.


 1)if you have CSS like this 













2)Then apply below CSS to make it more simple like











 <style type="text/css">
   /*AutoComplete flyout */
.completionList {
border:solid 1px #444444;
margin:0px;
padding:2px;
height: 100px;
overflow:auto;
background-color: #FFFFFF;
}

.listItem {
color: #1C1C1C;
}

.itemHighlighted {
background-color: #ffc0c0;
}
   </style>

3)and further you know you must edit these thing with your extender too.
  
     CompletionListCssClass="completionList"
     CompletionListHighlightedItemCssClass="itemHighlighted"
     CompletionListItemCssClass="listItem"


If you are very new to AJAX autocomplete then here is a sample of autocomplete Extender on work.
                                
you may also like.....
Ajax Progress Bar.
Autocomplete Extender.
Ajax Calender Extender.

2 comments: