JQuery UI Autocomplete: Auto height does not respect maxHeight

css, jquery-ui

Solution

I used TJ's great example (http://jsfiddle.net/s6XTu/12/) for my code. But if you are using multiple autocomplete on your page you have to change some lines in the script. You have to use the "autocomplete("widget")" as reference.

    $('.ui-autocomplete').css('height', 'auto');
var $input = $(event.target),
    inputTop = $input.offset().top,
    inputHeight = $input.height(),
    autocompleteHeight = $input.autocomplete("widget").height(), // changed
    windowHeight = $(window).height();
if((inputHeight + autocompleteHeight) > (windowHeight - inputTop - inputHeight)) {
    $('.ui-autocomplete').css('height', (windowHeight - inputHeight - inputTop - 20) + 'px');
}

Problem

I would like my jQuery UI AutoComplete to have the dynamic window size containing the available options, but also to have a max height so that when there are a large number of options returned it does not take up the whole page. When I have the following, the height is dynamic but maxHeight is ignored: ``` .ui-autocomplete { height: auto; max-height: 250px; overflow-y: auto; width:auto; } ``` When I have the following, the height is not dynamic but maxHeight works: ``` .ui-autocomplete { height: 250px; max-height: 250px; overflow-y: auto; width:auto; } ```

Original source