If chosen selectbox is close to bottom of the page, open options above the selectbox

This commit is contained in:
Nathan Gray 2012-11-21 16:22:29 +00:00
parent 90edebaa72
commit 0b3836a9f5
2 changed files with 31 additions and 1 deletions

View File

@ -9,7 +9,7 @@
.chzn-container .chzn-drop {
background: #fff;
border: 1px solid #aaa;
border-top: 0;
border-top-width: 0px;
position: absolute;
top: 29px;
left: 0;
@ -19,6 +19,12 @@
min-width: 4ex;
z-index: 1010;
}
.chzn-container .chzn-drop.chzn-above {
top:auto !important;
bottom: 18px;
border-top-width: 1px;
border-bottom-width: 0;
}
/* @end */
/* @group Single Chosen */

View File

@ -353,6 +353,7 @@ Copyright (c) 2011 by Harvest
});
this.search_field = this.container.find('input').first();
this.search_results = this.container.find('ul.chzn-results').first();
this.search_results.data('initialMaxHeight', this.search_results.css('max-height'));
this.search_field_scale();
this.search_no_results = this.container.find('li.no-results').first();
if (this.is_multiple) {
@ -608,6 +609,29 @@ Copyright (c) 2011 by Harvest
"top": dd_top + "px",
"left": 0
});
// Check to see if there's enough space below
// Thanks, corryworrell https://github.com/harvesthq/chosen/issues/155
this.search_results.css('max-height', 'none');
var windowHeight = $(window).height() + $('html').scrollTop(),
dropdownHeight = this.dropdown.height(),
dropdownTop = Math.ceil(this.dropdown.offset().top),
totalHeight = dropdownHeight + dropdownTop;
if (totalHeight > windowHeight) {
var difference = totalHeight - windowHeight,
height = dropdownHeight - difference;
if (height > 100) {
this.search_results.css('max-height', height);
} else {
this.dropdown.addClass('chzn-above');
this.search_results.css('max-height', this.search_results.data('initialMaxHeight'));
}
} else {
this.search_results.css('max-height', this.search_results.data('initialMaxHeight'));
}
this.results_showing = true;
this.search_field.focus();
this.search_field.val(this.search_field.val());