fix(graph): fix for table legend and scroll, fixes #7204, fixes #6628

public/app/plugins/app/testdata/plugin.json

@@ -9,7 +9,7 @@
       "name": "Grafana Project",
       "name": "Grafana Project",
       "url": "http://grafana.org"
       "url": "http://grafana.org"
     },
     },
-    "version": "1.0.15",
+    "version": "1.0.16",
     "updated": "2016-09-26"
     "updated": "2016-09-26"
   },
   },
 
 

public/app/plugins/panel/graph/legend.js

@@ -124,6 +124,7 @@ function (angular, _, $) {
 
 
           $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
           $container.toggleClass('graph-legend-table', panel.legend.alignAsTable === true);
 
 
+          var tableHeaderElem;
           if (panel.legend.alignAsTable) {
           if (panel.legend.alignAsTable) {
             var header = '<tr>';
             var header = '<tr>';
             header += '<th colspan="2" style="text-align:left"></th>';
             header += '<th colspan="2" style="text-align:left"></th>';
@@ -135,7 +136,7 @@ function (angular, _, $) {
               header += getTableHeaderHtml('total');
               header += getTableHeaderHtml('total');
             }
             }
             header += '</tr>';
             header += '</tr>';
-            $container.append($(header));
+            tableHeaderElem = $(header);
           }
           }
 
 
           if (panel.legend.sort) {
           if (panel.legend.sort) {
@@ -148,6 +149,8 @@ function (angular, _, $) {
           }
           }
 
 
           var seriesShown = 0;
           var seriesShown = 0;
+          var seriesElements = [];
+
           for (i = 0; i < seriesList.length; i++) {
           for (i = 0; i < seriesList.length; i++) {
             var series = seriesList[i];
             var series = seriesList[i];
 
 
@@ -156,6 +159,7 @@ function (angular, _, $) {
             }
             }
 
 
             var html = '<div class="graph-legend-series';
             var html = '<div class="graph-legend-series';
+
             if (series.yaxis === 2) { html += ' graph-legend-series--right-y'; }
             if (series.yaxis === 2) { html += ' graph-legend-series--right-y'; }
             if (ctrl.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
             if (ctrl.hiddenSeries[series.alias]) { html += ' graph-legend-series-hidden'; }
             html += '" data-series-index="' + i + '">';
             html += '" data-series-index="' + i + '">';
@@ -180,7 +184,7 @@ function (angular, _, $) {
             }
             }
 
 
             html += '</div>';
             html += '</div>';
-            $container.append($(html));
+            seriesElements.push($(html));
 
 
             seriesShown++;
             seriesShown++;
           }
           }
@@ -193,9 +197,13 @@ function (angular, _, $) {
             }
             }
 
 
             var topPadding = 6;
             var topPadding = 6;
-            $container.css("max-height", maxHeight - topPadding);
+            var tbodyElem = $('<tbody></tbody>');
+            tbodyElem.css("height", maxHeight - topPadding);
+            tbodyElem.append(tableHeaderElem);
+            tbodyElem.append(seriesElements);
+            $container.append(tbodyElem);
           } else {
           } else {
-            $container.css("max-height", "");
+            $container.append(seriesElements);
           }
           }
         }
         }
       }
       }

public/sass/components/_panel_graph.scss

@@ -85,9 +85,11 @@
 }
 }
 
 
 .graph-legend-table {
 .graph-legend-table {
+  tbody {
+    display: block;
     overflow-y: auto;
     overflow-y: auto;
     overflow-x: hidden;
     overflow-x: hidden;
-  display: table;
+  }
 
 
   .graph-legend-series {
   .graph-legend-series {
     display: table-row;
     display: table-row;