7

Closed

Autocomplete width problem - allow autocomplete flyout to be wider than textbox

description

When you have a small textbox and a list with long items, the list width is set to the textbox width.
In these cases the long items span accross multiple lines in the listbox. I would like to set an "auto" width so the list can grow with the items width.
If I comment this line of code I obtain the result:

// this._completionListElement.style.width = Math.max(1, elementBounds.width - 2) + 'px';

Perhaps adding a property would be a good solution.

if ( this._completionListWidth != "" )
    this._completionListElement.style.width = this._completionListWidth;
else
   this._completionListElement.style.width = Math.max(1, elementBounds.width - 2) + 'px';
Closed May 7, 2015 at 12:14 PM by MikhailTymchukDX
Workaround found, see comments.

comments

dschilling wrote Nov 19, 2007 at 4:39 PM

I've run into this issue before as well. Another way to address it would be to add a boolean AutoWidth property, whose default value would be true. The following code would replace AutoCompleteBehavior.js, line 745:

if (this._autoWidth) {
this._completionListElement.style.width = Math.max(1, elementBounds.width - 2) + 'px';
}

This would simply leave the width untouched if AutoWidth is false, allowing the width to be set via CSS.

wrote Dec 29, 2007 at 12:05 AM

We should allow this. Patches are welcome. I am not sure the fix mentioned here will work as is. it may need some more.

blackbart wrote Jan 11, 2008 at 8:10 PM

You could also try adding a cssclass to the CompletionListCssClass attribute of the extender similar to the following:

.autoComplete
{
list-style-type: none;
margin: 0px !important;
white-space: nowrap;
width: auto !important;
}