Vertical Scrollbar in JQuery AutoComplete UI

In most cases, we need to display a vertical scrollbar in JQuery AutoComplete UI.

JQuery and UI libraries come along with their own styling and theming, and it has its own CSS "jquery-ui-n.n.nn.css".

And we certainly need to play with the styles inside that in order to change any behaviour or styling of same.

Instead of doing any changes inside JQuery libraries, add following styling attributes in your page/ css file, and you will find vertical scrollbar.

/* setting up height for autocomplete UI */
.ui-autocomplete {
    max-height: 150px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-left: 5px;
    padding-right: 5px;
}
/* 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: 150px;
}

Remember, changing JQuery libraries are never a good idea, because you will also need to take care of the same each time when you upgrade your libraries:

CodeProject