AutoComplete Extender Word Wrapping

Recently I’ve been working with the ASP.NET AutoCompleteExtender control.  It’s a pretty nifty way to quickly get an auto complete input on you web forms.  Unfortunately there are some annoying behaviors that can really get on your nerves.  One such issue is word wrapping when your results are wider than your input control.  The client had these auto completion names that were more than 100 characters long; this made the list word wrap, and it looked absolutely terrible.  Luckily there is a clean way around this using some “important” css!

1) Set the property AutoCompleteExtender.CompletionListElementID to a DIV that is placed right below the control that will have the auto complete and set the css class, such as:

<div ID="autoCompletePanel" runat="server" class="autoCompleList"></div>

2) In a css style sheet, define the following class.  Notice the use of the css !important.  This forces the rendered auto complete data to not word wrap.

.autoCompleteList {
    width: auto !important;   
    overflow: visible !important;
}

3) If you want to customize and add extra styling you can override other properties that are placed on the elements inside your auto complete. Each item in the list is rendered in it’s own DIV.

.autoCompleteList div {    
/* Any extra styles you want to override */
border: 1px dashed buttonshadow;
background-color: window; color:
windowtext;
cursor: default;
width: 130px;
position: absolute;
left: 184px;
top: 27px;
display: inline;
}

 Other auto complete implementations: 10 Auto Complete Ajax Scripts

No comments: