I am using jQuery Autocomplete - it all works fine however I would like to amend the width, currently in Firebug the width is set to 268px, but I want this to be 520px.
I cannot see where the width is being set to 268px in the stylesheet, trying to override the 'autocomplete-suggestions' with an !important doesn't seem to work.
Any ideas on how to set this width from 268px to 520px?
<div id="appendTo">
<div class="autocomplete-suggestions" style="position: absolute; width: 268px; max-height: 300px; z-index: 9999;">
Existing CSS
.autocomplete-suggestions {
background-color: #79BE28;
border-radius: 7px;
box-shadow: 0 4px 4px #CCCCCC;
max-height: 650px !important;
width: 520px !important;
}
.autocomplete-suggestions .autocomplete-suggestion {
font-size: 12px;
text-align: left;
color: #fff;
padding: 4px 15px;
cursor: pointer;
}
.autocomplete-suggestions .autocomplete-suggestion:hover {
font-weight: bold;
}
.autocomplete-suggestions .autocomplete-suggestion strong {
text-decoration: underline;
}
.autocomplete-suggestion {
z-index: -1 !important;
}
You could potentially do it like this. (As seen in Changing width of jquery-ui autocomplete widgets individually)
$('#input').autocomplete({
source: mysource,
open: function() { $('#autocomplete-suggestions').width(520) }
});