Browse Source

Fixed drop down alignment issue when body has an offset and is not position static

Brent Burgoyne 12 years ago
parent
commit
5580dbbc4c
1 changed files with 11 additions and 1 deletions
  1. 11 1
      select2.js

+ 11 - 1
select2.js

@@ -867,15 +867,25 @@
                 dropHeight = this.dropdown.outerHeight(),
                 dropHeight = this.dropdown.outerHeight(),
                 viewportBottom = $(window).scrollTop() + document.documentElement.clientHeight,
                 viewportBottom = $(window).scrollTop() + document.documentElement.clientHeight,
                 dropTop = offset.top + height,
                 dropTop = offset.top + height,
+                dropLeft = offset.left,
                 enoughRoomBelow = dropTop + dropHeight <= viewportBottom,
                 enoughRoomBelow = dropTop + dropHeight <= viewportBottom,
                 enoughRoomAbove = (offset.top - dropHeight) >= this.body().scrollTop(),
                 enoughRoomAbove = (offset.top - dropHeight) >= this.body().scrollTop(),
                 aboveNow = this.dropdown.hasClass("select2-drop-above"),
                 aboveNow = this.dropdown.hasClass("select2-drop-above"),
+                bodyOffset,
                 above,
                 above,
                 css;
                 css;
 
 
             // console.log("below/ droptop:", dropTop, "dropHeight", dropHeight, "sum", (dropTop+dropHeight)+" viewport bottom", viewportBottom, "enough?", enoughRoomBelow);
             // console.log("below/ droptop:", dropTop, "dropHeight", dropHeight, "sum", (dropTop+dropHeight)+" viewport bottom", viewportBottom, "enough?", enoughRoomBelow);
             // console.log("above/ offset.top", offset.top, "dropHeight", dropHeight, "top", (offset.top-dropHeight), "scrollTop", this.body().scrollTop(), "enough?", enoughRoomAbove);
             // console.log("above/ offset.top", offset.top, "dropHeight", dropHeight, "top", (offset.top-dropHeight), "scrollTop", this.body().scrollTop(), "enough?", enoughRoomAbove);
 
 
+            // fix positioning when body has an offset and is not position: static
+
+            if (this.body().css('position') !== 'static') {
+                bodyOffset = this.body().offset();
+                dropTop -= bodyOffset.top;
+                dropLeft -= bodyOffset.left;
+            }
+
             // always prefer the current above/below alignment, unless there is not enough room
             // always prefer the current above/below alignment, unless there is not enough room
 
 
             if (aboveNow) {
             if (aboveNow) {
@@ -898,7 +908,7 @@
 
 
             css = $.extend({
             css = $.extend({
                 top: dropTop,
                 top: dropTop,
-                left: offset.left,
+                left: dropLeft,
                 width: width
                 width: width
             }, evaluate(this.opts.dropdownCss));
             }, evaluate(this.opts.dropdownCss));