1
0
mirror of synced 2024-11-23 05:26:10 +03:00

Fix mask height/width when document is shorter than window

When the document element (e.g., the body) is shorter than the window,
the select2-drop-mask was not extending all the way to the bottom
of the browser viewport, leading to an area below the body that was
clickable but that select2 did not notice. Thus, if a user clicked
down there, the drop would not disappear. This is particularly
troublesome if the page contains absolutely positioned elements at
the bottom of the browser window.
This commit is contained in:
Dave Smith 2013-03-01 15:05:46 -07:00
parent 66860b2811
commit 953b6f2ac1

View File

@ -1121,9 +1121,7 @@ the specific language governing permissions and limitations under the Apache Lic
this.dropdown.attr("id", "select2-drop");
// show the elements
mask.css({
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight});
mask.css(_makeMaskCss());
mask.show();
this.dropdown.show();
this.positionDropdown();
@ -1136,14 +1134,19 @@ the specific language governing permissions and limitations under the Apache Lic
var that = this;
this.container.parents().add(window).each(function () {
$(this).bind(resize+" "+scroll+" "+orient, function (e) {
$("#select2-drop-mask").css({
width:document.documentElement.scrollWidth,
height:document.documentElement.scrollHeight});
$("#select2-drop-mask").css(_makeMaskCss());
that.positionDropdown();
});
});
this.focusSearch();
function _makeMaskCss() {
return {
width : Math.max(document.documentElement.scrollWidth, $(window).width()),
height : Math.max(document.documentElement.scrollHeight, $(window).height())
}
}
},
// abstract