JQuery UI Autocomplete (1.8) scroll

Question

i'm having troubles configuring the autocomplete module of JQuery-UI. I need that when the amount of data to select is big enough an scroll bar appears.

This is what i tried:

• in the jquery-ui-1.8.16.css i've set this:

ui.autocomplete{
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

*as shown in the ui-documentation example

This is how i declare and autocomplete input:

$("#myInput").autocomplete({
    source: mySource,
    minLength: 0,
});

I dont know why the scroll bar does not appear, any help would be appreciated. Thank you very much!

Solution

You should override the css setting it in the page like this

<style>
.ui-autocomplete {
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
    height: 100px;
}
</style>

instead of changing values in jquery-ui-1.8.16.css