From 8c04eb272d26c948e4fcbebd821a88095b6a2790 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 11 Apr 2018 17:38:53 +0200 Subject: [PATCH 1/4] panel: add baron scroller to correct element This resolves issue with alert list panel getting scrollbars attached to incorrect element. Now the panel content are rendered correctly and all content are displayed as expected. --- public/app/features/panel/panel_directive.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 90ff42f4ac6..e549ca262d3 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -113,7 +113,8 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) { `; let scrollRoot = panelContent; - let scroller = panelContent.find(':first-child').find(':first-child'); + let scroller = panelContent.find(':first').find(':first'); + scrollRoot.addClass(scrollRootClass); $(scrollBarHTML).appendTo(scrollRoot); scroller.addClass(scrollerClass); From 2956011b60ee2d9e50a474b46b1bb72038d9e714 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 11 Apr 2018 17:44:51 +0200 Subject: [PATCH 2/4] fix so that dash list panel are rendered correctly This resolves issue with dash list panel getting scrollbars attached to incorrect elements. Now the panel content are rendered correctly and all content are displayed as expected. --- public/app/plugins/panel/dashlist/module.html | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/public/app/plugins/panel/dashlist/module.html b/public/app/plugins/panel/dashlist/module.html index 8fa3e7ef71f..fdba0c79f35 100644 --- a/public/app/plugins/panel/dashlist/module.html +++ b/public/app/plugins/panel/dashlist/module.html @@ -1,17 +1,19 @@ -
-
-
- {{group.header}} -
-
- - - {{dash.title}} - - - - - +
+
+
+
+ {{group.header}} +
+
+ + + {{dash.title}} + + + + + +
From 9549aadd2676d88ef6ec25a2f8e1d24b4d8caf46 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 11 Apr 2018 17:49:40 +0200 Subject: [PATCH 3/4] fix so that page scrollbars can be scrolled by keyboard on page load The page scrollbars are custom, not rendered on the body element and with css property overflow set for scroll to be enabled. For being able to scroll the page using the keyboard when a page loads, some custom code was needed. This fix should both work when doing a full reload of a url and when navigating to other pages/dashboards. For those pages having an input field that are focused on load, scrolling by keyboard (arrow up/down) will obviously not work. --- public/app/core/components/scroll/page_scroll.ts | 4 ++++ public/views/index.template.html | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/public/app/core/components/scroll/page_scroll.ts b/public/app/core/components/scroll/page_scroll.ts index 4782ad6d060..e6db344a4d6 100644 --- a/public/app/core/components/scroll/page_scroll.ts +++ b/public/app/core/components/scroll/page_scroll.ts @@ -29,7 +29,11 @@ export function pageScrollbar() { scope.$on('$routeChangeSuccess', () => { lastPos = 0; elem[0].scrollTop = 0; + elem[0].focus(); }); + + elem[0].tabIndex = -1; + elem[0].focus(); }, }; } diff --git a/public/views/index.template.html b/public/views/index.template.html index 9f151527b88..79da1d7179c 100644 --- a/public/views/index.template.html +++ b/public/views/index.template.html @@ -40,7 +40,7 @@
-
+