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.

16 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
  14. GV wrote:

    Thank you, worked like a charm

    Posted on January 29, 2019 at 7:01 AM | Permalink
  15. jenny wrote:

    Thanks a lot.

    Posted on February 18, 2019 at 2:05 PM | Permalink
  16. Joji wrote:

    Thanks for this wonderful solution 🙂

    Posted on January 20, 2020 at 2:16 AM | Permalink
One Trackback/Pingback
  1. […] 感谢Michael Simons https://info.michael-simons.eu/2013/05/02/how-to-fix-jquery-uis-autocomplete-width/ […]

Post a Comment

Your email is never published. We need your name and email address only for verifying a legitimate comment. For more information, a copy of your saved data or a request to delete any data under this address, please send a short notice to michael@simons.ac from the address you used to comment on this entry.
By entering and submitting a comment, wether with or without name or email address, you'll agree that all data you have entered including your IP address will be checked and stored for a limited time by Automattic Inc., 60 29th Street #343, San Francisco, CA 94110-4929, USA. only for the purpose of avoiding spam. You can deny further storage of your data by sending an email to support@wordpress.com, with subject “Deletion of Data stored by Akismet”.
Required fields are marked *