jQuery UI Autocomplete Width Not Set Correctly
JqueryJquery UiAutocompleteJquery Ui-AutocompleteJquery Problem Overview
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?
Jquery Solutions
Solution 1 - Jquery
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.
Solution 2 - Jquery
It turns out the problem is that the menu is expanding to fill the width of its parent element, which by default is the body. This can be corrected by giving it a containing element of the correct width.
First I added a <div> like so:
<div id="menu-container" style="position:absolute; width: 500px;"></div>
The absolute positioning allows me to place the <div> immediately after the input without interrupting the document flow.
Then, when I invoke the autocomplete, I specify an appendTo argument in the options, causing the menu to be appended to my <div>, and thus inherit its width:
$('#myInput').autocomplete({ source: {...}, appendTo: '#menu-container'});
This fixes the problem. However, I'd still be interested to know why this is necessary, rather than the plug-in working correctly.
Solution 3 - Jquery
I know this has long since been answered, but i think there is a better solution
$(".autocomplete").autocomplete({
...
open: function() {
$("ul.ui-menu").width( $(this).innerWidth() );
...
}
...
});
It worked fine for me.
Solution 4 - Jquery
I had a dig around in the autocomplete code and the culprit is this little blighter
_resizeMenu: function() {
var ul = this.menu.element;
ul.outerWidth( Math.max(
ul.width( "" ).outerWidth(),
this.element.outerWidth()
) );
},
I'm not sure what ul.width("") is suppose to be doing but ui.width("").outWidth() always returns the width of the body because that's what the ul is appended to. Hence the width is never set to the elements width....
Anyway. To fix simply add this to your code
$element.data("autocomplete")._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
Is this a bug?
EDIT: In case anyone wants to see a reduced test case for the bug here it is.
Solution 5 - Jquery
Set the css in the open event!
$('#id').autocomplete({
minLength: 3,
source: function(request, response) {
$.ajax({
url: "myurl",
dataType: "json",
type: 'POST',
data: {
'q': request.term,
'maxRows': 15
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.name,
}
})),
}
})
},
select: function(event, ui) {
$("#id").val(ui.item.label);
},
focus: function ( event, ui ){
$form.find('#id').val(ui.item.label);
return false;
},
open: function(){
$('.ui-autocomplete').css('width', '300px'); // HERE
}
})
Solution 6 - Jquery
I know this has been answered long ago, but I ran into same problem. My solution was to add position:absolute
Solution 7 - Jquery
I ran into this issue as well but realized that I just forgot to include a reference to the jquery.ui.autocomplete.css style sheet. Did you include that style sheet in your layout/master page?
Solution 8 - Jquery
$("#autocompleteID").autocomplete({
source: "http://myhost/magento/js/jquery/ui/php/ville.php",
minLength: 1,
open: function(event, ui)
{
$("#autocompleteID").autocomplete ("widget").css("width","300px");
}
});
Solution 9 - Jquery
If you like to use css try this:
.ui-widget-content.ui-autocomplete {
width: 350px;
}
It will work on every autocomplete input.
Solution 10 - Jquery
If you are using the official jQuery ui autocomplete (i'm on 1.8.16) and would like to define the width manually, you can do so.
If you're using the minified version (if not then find manually by matching _resizeMenu), find...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
...and replace it with (add this.options.width|| before Math.max) ...
_resizeMenu:function(){var a=this.menu.element;a.outerWidth(this.options.width||Math.max(a.width("").outerWidth(),this.element.outerWidth()))}
... you can now include a width value into the .autocomplete({width:200}) function and jQuery will honour it. If not, it will default to calculating it.
Solution 11 - Jquery
I know this has long since been answered, but the easiest way I find is to use the id of the autocomplete, and to set the width to 100px you would call
$('.ui-autocomplete-input#MyId').css('width', '100px');
after you finish your $('#MyId').autocomplete(...); call. This way you don't end up tying the order of your autocomplete textboxes in your DOM to your script.
Solution 12 - Jquery
In case you not are able to set the width dynamically and nothing at all works try to include this
either in a linked sheet or hardcoded and set the parameters here.
It worked for me after trying everything else
Solution 13 - Jquery
Well, Ender. I don't know if my solution can help you or not, but with Jqueryui remote-with-cache.html it worked. I just put in the size property in the text box.
Please see the code below:
<div class="demo">
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" size="30"/>
</div>
</div>
Solution 14 - Jquery
My solution was to append the autocomplete to a div with an id, and they set CSS for that specific ul:
jQuery/JavaScript:
$("input[name='search-text]").autocomplete({
appendTo: "#item-search-autocomplete",
source: ....
});
CSS:
#item-search-autocomplete .ui-autocomplete {
width: 315px;
}
Works like a charm.
Solution 15 - Jquery
I faced the same issue and resolved it by using this piece of code, though it is a little hit and trial kind of thing, but it works, I was not being able to set the width so I decided to set the max-width property.
$('.ui-autocomplete').css('margin-left','25%') //center align
$('.ui-autocomplete').css('max-width','38%') //hit and trial
$('.ui-autocomplete').css('min-width','38%') //hit and trial
See what works best for you.Hope this helps.
Solution 16 - Jquery
There is a width option for the autocomplete. I use it for 1.3.2.
$('#mytextbox').autocomplete(url, {
width: 280,
selectFirst: false,
matchSubset: false,
minChars: 1,
extraParams:{myextraparam:myextraparam},
max: 100
});
Solution 17 - Jquery
I have this in my css file, so the autocomplete takes the width of the styled span:
span input.ui-autocomplete-input {
width: 100%;
}