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

View File

@ -353,6 +353,7 @@ Copyright (c) 2011 by Harvest
}); });
this.search_field = this.container.find('input').first(); this.search_field = this.container.find('input').first();
this.search_results = this.container.find('ul.chzn-results').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_field_scale();
this.search_no_results = this.container.find('li.no-results').first(); this.search_no_results = this.container.find('li.no-results').first();
if (this.is_multiple) { if (this.is_multiple) {
@ -608,6 +609,29 @@ Copyright (c) 2011 by Harvest
"top": dd_top + "px", "top": dd_top + "px",
"left": 0 "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.results_showing = true;
this.search_field.focus(); this.search_field.focus();
this.search_field.val(this.search_field.val()); this.search_field.val(this.search_field.val());