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:
parent
66860b2811
commit
953b6f2ac1
15
select2.js
15
select2.js
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user