24

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!

benomatis
  • 5,536
  • 7
  • 36
  • 59
Andreu Ramos
  • 2,858
  • 2
  • 25
  • 36

1 Answers1

71

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

Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
  • 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. – jamix Dec 12 '13 at 12:34