Finder Autocomplete Width

You can see it with firebug, it's just not very user friendly. You have to have firebug open and showing you what you want before you use the autocomplete - and as soon as you click on firebug again you have a fraction of a second to see what you need to see before it all shits itself.

Here is some example HTML of a finder before the autocomplete is used.

<div class="finder-page" id="finder-page-2"><div class="finder-view-build-id" id="finder-6bf7c0f1f3233e8a2ddf86dba586f13d"><div class="finder-view-2 finder-view"><div style="float: right;" class="finder-admin-links" id="finder-admin-links-2"><div class="item-list"><ul class="links"><li class="first last"><a href="/drupal6/admin/build/finder/2/edit">Edit</a></li>
</ul></div></div><form id="finder-form-2" method="post" accept-charset="UTF-8" action="/drupal6/finder/2">
<div><div class="finder-form finder-2"><div id="edit-3-wrapper" class="form-item">
 <label for="edit-3">Finder element 3: </label>
 <input type="text" class="form-text form-autocomplete" value="" size="60" id="edit-3" name="3" maxlength="128" autocomplete="OFF"/>
</div>
<input type="hidden" disabled="disabled" value="http://braksator.com/drupal6/finder_autocomplete/autocomplete/2/3" id="edit-3-autocomplete" class="autocomplete autocomplete-processed"/><input type="submit" class="form-submit" value="Find" id="edit-submit" name="find"/>
</div><input type="hidden" value="form-fe8f39c512dfe8862250f917197bcd69" id="form-fe8f39c512dfe8862250f917197bcd69" name="form_build_id"/>
<input type="hidden" value="b18fbf8e6e96629c4dbc017f71bf6b82" id="edit-finder-form-2-form-token" name="form_token"/>
<input type="hidden" value="finder_form_2" id="edit-finder-form-2" name="form_id"/>

</div></form>
</div></div></div>

The suggestions appear in a div that is inserted between the label and the input field.

Before using autocomplete:

 <label for="edit-3">Finder element 3: </label>
 <input type="text" class="form-text form-autocomplete" value="" size="60" id="edit-3" name="3" maxlength="128" autocomplete="OFF"/>

When the suggestions appear:

 <label for="edit-3">Finder element 3: </label>
 <div id="autocomplete" style="margin-top: 20px; width: 379px;">
 <ul>
   <li>a suggestion</li>
   <li>another suggestion</li>
 </ul>
 </div>
 <input type="text" class="form-text form-autocomplete" value="" size="60" id="edit-3" name="3" maxlength="128" autocomplete="OFF"/>

When you hover over a 'li' it adds a class to that li called 'selected'.

The width of the div is automatically calculated by javascript to be the width of your input box. You can edit the input field width with CSS or by changing the form element settings in finder.

Hope that helps.

You can do it with CSS by adding a max-width

html.js input.form-autocomplete {
background-position: 100% 5px;
max-width:200px;
}