jQueryUI Autocomplete ComboBox Too Long

Question

My jQuery UI AutoComplete ComboBox doesn\'t have a scrollbar on the right side and gets very, unfortuantely, long as shown below. I\'d like to restrain this list to a reason

Answer 1

You can set the height via CSS:

.ui-autocomplete {
    max-height: 600px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

Answer 2

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

This would do the trick. Without having horizontal scroll bar.

Answer 3

Start looking into the CSS. Most likely the drop down list is a select or ul. If the drop down is enclosed within a DIV, add "overflow:auto", that will give it a scroll bar. Or set the max height to the div. Another solution would be putting a limit on the results. Just don't populate the box with that many entries.

Answer 4

Create your own extension and add the required methods:

$.widget("custom.combobox",
$.custom.combobox,
{
    //Extension metod to add custom css to input
    addInputCss: function (css) {
        this.input.addClass(css);
    },

    //Extension metod to add custom css to menu (opened select list)
    addMenuCss: function (css) {
        $(this.input.autocomplete("instance").menu.element).addClass(css);

    },
});

Sample usage:

$("#yourSelectId").combobox().combobox("addInputCss","yourInputCss").combobox("addMenuCss","yourMenuCss");

Answer 5

This is an old question, so while the solution by j08691 worked fine with older Primefaces, now the class name has changed to "ui-autocomplete-list":

.ui-autocomplete-list {
    max-height: 400px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

Answer 6

At some point this has changed again, as of jQuery-UI 1.12.1 the class is 'ui-autocomplete.ui-front' so the accepted answer becomes:

.ui-autocomplete.ui-front {
    max-height: 600px;
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}