diff --git a/js/admin_toolbar.hover.js b/js/admin_toolbar.hover.js --- a/js/admin_toolbar.hover.js +++ b/js/admin_toolbar.hover.js @@ -5,6 +5,33 @@ // Other wise we get unwanted behaviour where menu items are expanded while already in hovering other ones. $(this).parent().find('li').removeClass('hover-intent'); $(this).addClass('hover-intent'); + + + //add scroll to submenus when their height goes outside of the screen + $subMenuAdminToolbar = $(this).find("ul.toolbar-menu"); + + windowHeight = $(window).outerHeight(true); + ulHeight = $subMenuAdminToolbar.outerHeight(true); + + listPositionRelativeToPage = $subMenuAdminToolbar.position(); + listPositionRelativeToTopOfPage = listPositionRelativeToPage.top; + + if (listPositionRelativeToTopOfPage > 0 && windowHeight < (ulHeight + listPositionRelativeToTopOfPage + 100)) { + submenuLiHeights = []; + $subMenuAdminToolbar.find("> li").each( function () { + submenuLiHeights.push($(this).outerHeight(true)); + }); + + maxHeightUntilListIsNotOffScreen = windowHeight - listPositionRelativeToTopOfPage; + correctHeightForUl = 0; + + for (let i = 0; maxHeightUntilListIsNotOffScreen >= (correctHeightForUl + 100); i++) { + correctHeightForUl = correctHeightForUl + submenuLiHeights[i]; + } + + $subMenuAdminToolbar.css("height", correctHeightForUl) + .css("overflow-y", "scroll"); + } }, function () { $(this).removeClass('hover-intent');