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.

13 comments:

  1. cool one yaar,thnx..

    ReplyDelete
  2. Nice and simple
    Thank you so much!

    ReplyDelete
  3. excellent job.. bundle of thanks !

    ReplyDelete
  4. 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
  5. i fill data in autocompleteextender in another page how call apply css when i fill data

    ReplyDelete
  6. Auto Completeextender not displaying the results

    ReplyDelete
  7. I got webservice results but that result list is not displaying on auto completeextender while entering on textbox

    ReplyDelete
  8. Great job, thanks

    ReplyDelete

Print Only Grid View in ASP.net

ASP.net How to Print Only GridView < div id ="gridviewDiv" >   < asp:GridView ID ="gridViewToPri...