CODEWITHSUNDEEP
cssjquery-ui
AndrewM
AndrewM

Reputation: 33

JQuery UI Autocomplete: Auto height does not respect maxHeight

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;
}

Upvotes: 2

Views: 8515

Answers (4)

pankaj
pankaj

Reputation: 1906

this solutionis working in my side.

.ui-autocomplete {
        overflow: auto;
        max-height: 150px !important;
    }

Check this Images. enter image description here enter image description here

Upvotes: 0

Mayukh
Mayukh

Reputation: 21

Dont put hieght Just put max-height , it will work

.ui-autocomplete {
position: absolute;
top: 0;
left: 0;
cursor: default;
max-height: 145px;
overflow-y: auto; 
overflow-x: hidden;

}

Upvotes: 2

DavidKahnt
DavidKahnt

Reputation: 450

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');
}

Upvotes: 8

TJ VanToll
TJ VanToll

Reputation: 12704

The basic idea here is to only apply a height or max-height if the contents of the autocomplete widget is overflowing the window. You can detect this with the following:

//Reset the height so the true height can be calculated.
$('.ui-autocomplete').css('height', 'auto');

//Get some values needed to determine whether the widget is on
//the screen
var $input = $('#the-id-of-the-input-node'),
    inputTop = $input.offset().top,
    inputHeight = $input.height(),
    autocompleteHeight = $('.ui-autocomplete').height(),
    windowHeight = $(window).height();

//The widget has left the screen if the input's height plus it's offset from the top of
//the screen, plus the height of the autocomplete are greater than the height of the
//window.   
if ((inputHeight + inputTop + autocompleteHeight) > windowHeight) {

    //Set the new height of the autocomplete to the height of the window, minus the
    //height of the input and the offset of the input from the top of the screen.  The
    //20 is simply there to give some spacing between the bottom of the screen and the
    //bottom of the autocomplete widget.
    $('.ui-autocomplete')
        .css('height', (windowHeight - inputHeight - inputTop - 20) + 'px');
}

In CSS you'll also need to set the overflow so that a scroll bar appears when the content of the ui-autocomplete doesn't fit in its container.

.ui-autocomplete { overflow: auto; }

I have a live example showing this here - http://jsfiddle.net/s6XTu/12/.

Upvotes: 2

Related Questions