[jQuery] Avoid the autocomplete menu to go offscreen by positioning it on top
Sometime the autocomplete menu will not be entirely visible because of
the input is at the bottom of the screen
To fix this problem i have created a small hack that will position the
selectbox on top of the input.
To see what I mean look at the image:
http://tinypic.com/r/t6zcrc/5
code:
autocomple.js line 701:
replace function show by
[code]
show: function() {
if(options.scroll) {
list.scrollTop(0);
list.css({
maxHeight: options.scrollHeight,
overflow: 'auto'
});
if($.browser.msie && typeof
document.body.style.maxHeight === "undefined") {
var listHeight = 0;
listItems.each(function() {
listHeight += this.offsetHeight;
});
var scrollbarsVisible = listHeight > options.scrollHeight;
list.css('height', scrollbarsVisible ?
options.scrollHeight : listHeight );
if (!scrollbarsVisible) {
// IE doesn't recalculate width when scrollbar disappears
listItems.width( list.width() - parseInt(listItems.css("padding-
left")) - parseInt(listItems.css("padding-right")) );
}
}
}
var offset = $(input).offset();
var topPos = offset.top + input.offsetHeight;
var leftPos = offset.left;
var elmHeight = element.height();
var windowHeight = $(window).height();
// Check that position of Select does not go off screen-
If so put select on top .
if ( (topPos + elmHeight) > windowHeight) {
topPos = offset.top - elmHeight;
}
element.css({
width: typeof options.width == "string" || options.width > 0 ?
options.width : $(input).width(),
top: topPos,
left: leftPos
}).show();
},
[/code]
Hope it helps someone
Cheers