RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2025-02-17 04:23:15 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1777 from yonjah/master

Browse Source 
#1776 and #1722 dropdown position issue
This commit is contained in:
Igor Vaynberg 2013-10-08 20:13:05 -07:00
commit 51ee7f8dc4
1 changed files with 47 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
select2.js
View File

@ -1130,13 +1130,16 @@ the specific language governing permissions and limitations under the Apache Lic
// abstract // abstract
positionDropdown: function() { positionDropdown: function() {
var $dropdown = this.dropdown.hide(), var $dropdown = this.dropdown,
offset = this.container.offset(), offset = this.container.offset(),
height = this.container.outerHeight(false), height = this.container.outerHeight(false),
width = this.container.outerWidth(false), width = this.container.outerWidth(false),
dropHeight = $dropdown.outerHeight(false), dropHeight = $dropdown.outerHeight(false),
viewPortRight = $(window).scrollLeft() + $(window).width(), $window = $(window),
viewportBottom = $(window).scrollTop() + $(window).height(), windowWidth = $window.width(),
windowHeight = $window.height(),
viewPortRight = $window.scrollLeft() + windowWidth,
viewportBottom = $window.scrollTop() + windowHeight,
dropTop = offset.top + height, dropTop = offset.top + height,
dropLeft = offset.left, dropLeft = offset.left,
enoughRoomBelow = dropTop + dropHeight <= viewportBottom, enoughRoomBelow = dropTop + dropHeight <= viewportBottom,
@ -1146,10 +1149,40 @@ the specific language governing permissions and limitations under the Apache Lic
aboveNow = $dropdown.hasClass("select2-drop-above"), aboveNow = $dropdown.hasClass("select2-drop-above"),
bodyOffset, bodyOffset,
above, above,
changeDirection,
css, css,
resultsListNode; resultsListNode;
$dropdown.show(); // always prefer the current above/below alignment, unless there is not enough room
if (aboveNow) {
above = true;
if (!enoughRoomAbove && enoughRoomBelow) {
changeDirection = true;
above = false;
}
} else {
above = false;
if (!enoughRoomBelow && enoughRoomAbove) {
changeDirection = true;
above = true;
}
}
//if we are changing direction we need to get positions when dropdown is hidden;
if (changeDirection) {
$dropdown.hide();
offset = this.container.offset();
height = this.container.outerHeight(false);
width = this.container.outerWidth(false);
dropHeight = $dropdown.outerHeight(false);
viewPortRight = $window.scrollLeft() + windowWidth;
viewportBottom = $window.scrollTop() + windowHeight;
dropTop = offset.top + height;
dropLeft = offset.left;
dropWidth = $dropdown.outerWidth(false);
enoughRoomOnRight = dropLeft + dropWidth <= viewPortRight;
$dropdown.show();
}
if (this.opts.dropdownAutoWidth) { if (this.opts.dropdownAutoWidth) {
resultsListNode = $('.select2-results', $dropdown)[0]; resultsListNode = $('.select2-results', $dropdown)[0];
@ -1174,34 +1207,28 @@ the specific language governing permissions and limitations under the Apache Lic
dropLeft -= bodyOffset.left; dropLeft -= bodyOffset.left;
} }
// always prefer the current above/below alignment, unless there is not enough room
if (aboveNow) {
above = true;
if (!enoughRoomAbove && enoughRoomBelow) above = false;
} else {
above = false;
if (!enoughRoomBelow && enoughRoomAbove) above = true;
}
if (!enoughRoomOnRight) { if (!enoughRoomOnRight) {
dropLeft = offset.left + width - dropWidth; dropLeft = offset.left + width - dropWidth;
} }
css = {
left: dropLeft,
width: width
};
if (above) { if (above) {
dropTop = offset.top - dropHeight; css.bottom = windowHeight - offset.top;
css.top = 'auto';
this.container.addClass("select2-drop-above"); this.container.addClass("select2-drop-above");
$dropdown.addClass("select2-drop-above"); $dropdown.addClass("select2-drop-above");
} }
else { else {
css.top = dropTop;
css.bottom = 'auto';
this.container.removeClass("select2-drop-above"); this.container.removeClass("select2-drop-above");
$dropdown.removeClass("select2-drop-above"); $dropdown.removeClass("select2-drop-above");
} }
css = $.extend(css, evaluate(this.opts.dropdownCss));
css = $.extend({
top: dropTop,
left: dropLeft,
width: width
}, evaluate(this.opts.dropdownCss));
$dropdown.css(css); $dropdown.css(css);
}, },