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.

8 comments:

  1. Thnks...

    ReplyDelete
  2. cool one yaar,thnx..

    ReplyDelete
  3. Nice and simple
    Thank you so much!

    ReplyDelete
  4. excellent job.. bundle of thanks !

    ReplyDelete
  5. i have written mine try this


    /*AutoComplete flyout */
    .completionList {
    /*border:solid 1px #444444;*/
    margin:0px;
    padding:2px;
    height: 200px;
    overflow:auto;
    background-color: #FFFFFF;
    min-width: 500px;
    }

    .listItem {
    color: #1C1C1C;
    border: 1px solid #DDD;
    line-height:30px;
    }

    .itemHighlighted {
    background-color: #77BACE;
    line-height:30px;
    }

    ReplyDelete