AMBARI-20610. Unable to scroll down collapsed navigation bar if it's higher that viewport.(xiwang)
Project: http://git-wip-us.apache.org/repos/asf/ambari/repo Commit: http://git-wip-us.apache.org/repos/asf/ambari/commit/8d075c6a Tree: http://git-wip-us.apache.org/repos/asf/ambari/tree/8d075c6a Diff: http://git-wip-us.apache.org/repos/asf/ambari/diff/8d075c6a Branch: refs/heads/trunk Commit: 8d075c6a1ae8c6b1d2c8e64b717dac464496f415 Parents: 77dd10c Author: Xi Wang <xiw...@apache.org> Authored: Tue Mar 28 11:30:01 2017 -0700 Committer: Xi Wang <xiw...@apache.org> Committed: Wed Mar 29 18:11:39 2017 -0700 ---------------------------------------------------------------------- .../app/styles/theme/bootstrap-ambari.css | 6 +--- .../vendor/scripts/theme/bootstrap-ambari.js | 29 +++++++++++++++++--- 2 files changed, 26 insertions(+), 9 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ambari/blob/8d075c6a/ambari-web/app/styles/theme/bootstrap-ambari.css ---------------------------------------------------------------------- diff --git a/ambari-web/app/styles/theme/bootstrap-ambari.css b/ambari-web/app/styles/theme/bootstrap-ambari.css index b289517..b063fcf 100644 --- a/ambari-web/app/styles/theme/bootstrap-ambari.css +++ b/ambari-web/app/styles/theme/bootstrap-ambari.css @@ -1092,10 +1092,6 @@ input.radio:checked + label:after { top: 0; left: 50px; } -.navigation-bar-container.collapsed ul.nav.side-nav-menu li:hover ul.sub-menu, -.navigation-bar-container.collapsed ul.nav.side-nav-footer li:hover ul.sub-menu { - display: block; -} .navigation-bar-container.collapsed ul.nav.side-nav-menu li.submenu-li > a, .navigation-bar-container.collapsed ul.nav.side-nav-footer li.submenu-li > a { padding: 10px 5px 10px 25px; @@ -1166,7 +1162,7 @@ input.radio:checked + label:after { .navigation-bar-fit-height .navigation-bar-container { height: 100%; } -.navigation-bar-fit-height .navigation-bar-container:not(.collapsed) .side-nav-menu { +.navigation-bar-fit-height .navigation-bar-container .side-nav-menu { overflow-y: auto; } .notifications-group { http://git-wip-us.apache.org/repos/asf/ambari/blob/8d075c6a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js ---------------------------------------------------------------------- diff --git a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js index 5cdbb55..d7ffdd1 100644 --- a/ambari-web/vendor/scripts/theme/bootstrap-ambari.js +++ b/ambari-web/vendor/scripts/theme/bootstrap-ambari.js @@ -30,6 +30,7 @@ $(document).ready(function () { var settings = $.extend({}, $.fn.navigationBar.defaults, options); return this.each(function () { + var _this = this; var containerSelector = '.navigation-bar-container'; var $navigationContainer = $(this).find(containerSelector); @@ -48,10 +49,10 @@ $(document).ready(function () { $(this).addClass('navigation-bar-fit-height'); // make scrolling effect on side nav ONLY, i.e. not effected on ambari main contents - $(this).find('.side-nav-menu').on('DOMMouseScroll mousewheel', function(ev) { + $(this).find('.side-nav-menu').on('DOMMouseScroll mousewheel', function (ev) { var $this = $(this), - scrollTop = (this).scrollTop, - scrollHeight = (this).scrollHeight, + scrollTop = this.scrollTop, + scrollHeight = this.scrollHeight, height = $this.innerHeight(), delta = ev.originalEvent.wheelDelta, up = delta > 0; @@ -177,7 +178,9 @@ $(document).ready(function () { $dropdownMenu.on('click', function () { // some action was triggered, should hide this icon var moreIcon = $(this).parent(); - setTimeout(function(){ moreIcon.hide(); }, 1000); + setTimeout(function () { + moreIcon.hide(); + }, 1000); }); $navigationContainer.children('.side-nav-menu').scroll(function () { $moreActions.removeClass('open'); @@ -199,6 +202,16 @@ $(document).ready(function () { // set the hover effect when collapsed, should show sub-menu on hovering $subMenuItems.hover(function () { $(this).find(subMenuSelector).show(); + // set sub-menu position + var $parent = $(this); + var $header = $('.side-nav-header'); + if (settings.fitHeight) { + $(this).find(subMenuSelector).css({ + position: 'fixed', + top: $parent.offset().top - $header.offset().top + 'px', + left: 50 + 'px' + }); + } }, function () { $(this).find(subMenuSelector).hide(); }); @@ -209,6 +222,14 @@ $(document).ready(function () { }); $subMenuItems.unbind('mouseenter mouseleave'); $navigationContainer.find('.toggle-icon').removeClass(settings.menuLeftClass).addClass(settings.menuDownClass); + // set sub-menu position + if (settings.fitHeight) { + $(_this).find(subMenuSelector).css({ + position: 'relative', + top: 0, + left: 0 + }); + } } //set main content left margin based on the width of side-nav
