jqueryjquery-uiscrolljquery-ui-autocompletejquery-scrollable

JQuery UI Autocomplete (1.8) scroll


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:

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