Avoid dropdown menu to be truncated inside a column with scrolling

1 files changed, 15 insertions, 10 deletions

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("<div>", {"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();
 };