scrollable panels: fix initial content size (#9960)

public/app/features/panel/panel_ctrl.ts

@@ -6,7 +6,7 @@ import Remarkable from 'remarkable';
 import {GRID_CELL_HEIGHT, GRID_CELL_VMARGIN} from 'app/core/constants';
 
 const TITLE_HEIGHT = 27;
-const PANEL_BORDER = 2;
+const PANEL_BORDER = 12;
 
 import {Emitter} from 'app/core/core';
 
@@ -62,6 +62,7 @@ export class PanelCtrl {
   }
 
   refresh() {
+    this.setPanelHeight();
     this.events.emit('refresh', null);
   }
 
@@ -70,6 +71,7 @@ export class PanelCtrl {
   }
 
   changeView(fullscreen, edit) {
+    this.setPanelHeight();
     this.publishAppEvent('panel-change-view', {
       fullscreen: fullscreen, edit: edit, panelId: this.panel.id
     });
@@ -168,8 +170,15 @@ export class PanelCtrl {
     console.log(PANEL_BORDER + TITLE_HEIGHT);
   }
 
+  setPanelHeight() {
+    if (this.$scope.setPanelHeight) {
+      this.$scope.setPanelHeight();
+    }
+  }
+
   render(payload?) {
     this.timing.renderStart = new Date().getTime();
+    this.setPanelHeight();
     this.events.emit('render', payload);
   }
 

public/app/features/panel/panel_directive.ts

@@ -65,6 +65,7 @@ module.directive('grafanaPanel', function($rootScope, $document) {
       var cornerInfoElem = elem.find('.panel-info-corner');
       var ctrl = scope.ctrl;
       var infoDrop;
+      var panelScrollbar;
 
       // the reason for handling these classes this way is for performance
       // limit the watchers on panels etc
@@ -90,13 +91,24 @@ module.directive('grafanaPanel', function($rootScope, $document) {
         if (ctrl.__proto__.constructor.scrollable) {
           panelContent.addClass('panel-content--scrollable');
 
-          var myScrollbar = new GeminiScrollbar({
+          panelScrollbar = new GeminiScrollbar({
             autoshow: false,
             element: panelContent[0]
           }).create();
         }
       }
 
+      function setPanelHeight() {
+        panelContent.height(ctrl.height);
+        if (panelScrollbar) {
+          panelScrollbar.update();
+        }
+      }
+
+      if (ctrl.__proto__.constructor.scrollable) {
+        ctrl.$scope.setPanelHeight = setPanelHeight;
+      }
+
       // set initial transparency
       if (ctrl.panel.transparent) {
         transparentLastState = true;