Search code examples
javascriptjquerycssstylesheetclient-side

jQuery Autocomplete - cannot find where the width is being set on the suggestions div?


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;
}

Solution

  • 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) }  
    });