Help with jquery-ui-autocomplete select menu height

Question

I am working with jQuery and the ui-autocomplete in a Rails project. Right now when the autocomplete renders, it will open a drop down and display suggestions, but the drop down menu goes below the footer.

I saw this: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

and think that the 'pop-up with maxHeight set' would be perfect, but I can't find where to put the maxHeight option and if it takes just a number to show or what. I believe that I need to make the change to jquery-ui.js, also.

Any pointers, help or links would help greatly! Thanks!

P.S. Since my rep is low I can't post a picture with this but I can gladly email it or send it in another fashion to show anyone

Answer 1

You can style the .ui-autocomplete class to do this, which will force a max height.

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}