I have implemented a jQuery UI Autocomplete box, and rather than being the width of the textbox, the dropdown options are expanding to fill the remaining width of the page.
Have a look at this example to see it for yourself: http://jsbin.com/ojoxa4
I have tried setting the width of the list immediately after creating it, like so:
$('.ui-autocomplete:last').css('width',
$('#currentControlID').width()
);
This appears to do nothing.
I have also tried setting the width using on-page styles:
ui-autocomplete { width: 500px; }
This DOES work, amazingly, however it would mean that all autocompletes on a page would have to be the same width, which is not ideal.
Is there a way to set the width of each menu individually? Or better, can anyone explain why the widths are not working correctly for me?
I use this drop-in solution:
jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
That's basically @madcapnmckay's solution, but that doesn't need to change the original source.