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!

Piecedyed

Answer 1

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

Wobbly

That works but in my tests, the scrollbox is always displayed, as opposed to being shown only when the height of the autocomplete exceeds max-height. I haven't been able to find a quick solution for that though. – Myocardiograph