From 726efc93ee7a645966748ff6db88e91f614f311c Mon Sep 17 00:00:00 2001 From: Frederic Guillot Date: Wed, 9 Sep 2015 22:00:54 -0400 Subject: Avoid dropdown menu to be truncated inside a column with scrolling --- assets/js/src/Dropdown.js | 25 +++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) (limited to 'assets/js/src') diff --git a/assets/js/src/Dropdown.js b/assets/js/src/Dropdown.js index 6b40d1fc..e04603d8 100644 --- a/assets/js/src/Dropdown.js +++ b/assets/js/src/Dropdown.js @@ -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(); + + // Clone the submenu outside of the column to avoid clipping issue with overflow + $("body").append(jQuery("
", {"id": "dropdown"})); + submenu.clone().appendTo("#dropdown"); - if (! submenu.is(':visible')) { - self.close(); + var clone = $("#dropdown ul"); + clone.css('left', offset.left); - if ($(this).offset().top + submenuHeight - $(window).scrollTop() > $(window).height()) { - submenu.addClass('dropdown-submenu-open dropdown-submenu-top'); - } - else { - submenu.addClass('dropdown-submenu-open'); - } + 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(); }; -- cgit v1.2.3