Avoid dropdown menu to be truncated inside a column with scrolling

This commit is contained in:
Frederic Guillot
2015-09-09 22:00:54 -04:00
parent f3a5474e34
commit 726efc93ee
5 changed files with 25 additions and 22 deletions

View File

@@ -11,26 +11,31 @@ Dropdown.prototype.listen = function() {
$(document).on('click', '.dropdown-menu', function(e) {
e.preventDefault();
e.stopImmediatePropagation();
self.close();
var submenu = $(this).next('ul');
var submenuHeight = 240;
var offset = $(this).offset();
var height = $(this).height();
if (! submenu.is(':visible')) {
self.close();
// Clone the submenu outside of the column to avoid clipping issue with overflow
$("body").append(jQuery("<div>", {"id": "dropdown"}));
submenu.clone().appendTo("#dropdown");
if ($(this).offset().top + submenuHeight - $(window).scrollTop() > $(window).height()) {
submenu.addClass('dropdown-submenu-open dropdown-submenu-top');
}
else {
submenu.addClass('dropdown-submenu-open');
}
var clone = $("#dropdown ul");
clone.css('left', offset.left);
if (offset.top + submenuHeight - $(window).scrollTop() > $(window).height()) {
clone.css('top', offset.top - submenuHeight - height);
}
else {
self.close();
clone.css('top', offset.top + height);
}
clone.addClass('dropdown-submenu-open');
});
};
Dropdown.prototype.close = function() {
$('.dropdown-submenu-open').removeClass('dropdown-submenu-open');
$("#dropdown").remove();
};