How to fix jQuery UIs autocomplete width

May 2, 2013 by Michael

I recently noticed that the combobox item on an jQuery UI autocomplete grows way beyond the textfield input which is kinda ugly.

This is how i fix it (that is, make it as width as the input item):

$.extend($.ui.autocomplete.prototype.options, {
	open: function(event, ui) {
		$(this).autocomplete("widget").css({
            "width": ($(this).width() + "px")
        });
    }
});

This code applies it to every autocomplete.

13 comments

  1. Richard wrote:

    Beautiful. Thanks a million, Michael. How I hated that ul stretch beyond the page limits…

    Posted on January 14, 2014 at 8:54 PM | Permalink
  2. Michael wrote:

    Thanks Richard for your kind feedback, highly appreciated.

    Posted on January 15, 2014 at 10:05 AM | Permalink
  3. Ed Szwedo wrote:

    Thanks so much! I had copied the demo code exactly and was surprised to see the drop down menu extend all the way across the page.

    Posted on April 1, 2014 at 4:40 PM | Permalink
  4. Alan wrote:

    Where did you put this code though? Thanks!

    Posted on June 19, 2014 at 11:05 PM | Permalink
  5. Michael wrote:

    I put in the global scope before doing anything with JQuery. But i guess $(document).ready should work, also.

    Posted on June 19, 2014 at 11:23 PM | Permalink
  6. Ivan wrote:

    It saved my time. Many thanks!

    Posted on July 27, 2015 at 9:20 PM | Permalink
  7. Ardegedi wrote:

    Thanks!

    Posted on September 21, 2015 at 10:58 AM | Permalink
  8. Yasir Siddiqui wrote:

    Thanks, you are a life saver.

    Posted on February 9, 2016 at 9:25 AM | Permalink
  9. garudacrafts wrote:

    Thanks, excellent solution. I used “$(this).outerWidth()” in place of “$(this).width()” to get the width plus padding.

    Posted on February 22, 2016 at 4:42 AM | Permalink
  10. Georgios wrote:

    Thank you so much!!! Your solution with the combination of garudacrafts ‘s comment saved me !

    Posted on May 8, 2016 at 10:09 PM | Permalink
  11. Roland Wales wrote:

    Thank you, very helpful!

    Posted on August 3, 2016 at 6:28 PM | Permalink
  12. Michael wrote:

    You’re welcome!

    Posted on August 4, 2016 at 8:50 AM | Permalink
  13. Jack wrote:

    Hi Michael,

    That’s great and solved my problem…almost…the autocomplete gets resized but the text now won’t wrap. Any advice?

    Cheers.

    Posted on March 13, 2017 at 9:55 PM | Permalink
Post a Comment

Your email is never published nor shared. Required fields are marked *