Fixed #2312 vertical scroll bug with groups and fixed height (#2363)

* Fix left/right group alignment
* Add _setDOM and remove scrollbar when there is no scrolling
* Readd calculation of scrollbar width on resize

lib/timeline/Core.js

@@ -797,8 +797,8 @@ Core.prototype._redraw = function() {
   props.border.right  = props.border.left;
   props.border.top    = (dom.centerContainer.offsetHeight - dom.centerContainer.clientHeight) / 2;
   props.border.bottom = props.border.top;
-  var borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
-  var borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
+  props.borderRootHeight= dom.root.offsetHeight - dom.root.clientHeight;
+  props.borderRootWidth = dom.root.offsetWidth - dom.root.clientWidth;
 
   // workaround for a bug in IE: the clientWidth of an element with
   // a height:0px and overflow:hidden is not calculated and always has value 0
@@ -807,7 +807,7 @@ Core.prototype._redraw = function() {
     props.border.right  = props.border.left;
   }
   if (dom.root.clientHeight === 0) {
-    borderRootWidth = borderRootHeight;
+    props.borderRootWidth = props.borderRootHeight;
   }
 
   // calculate the heights. If any of the side panels is empty, we set the height to
@@ -824,28 +824,28 @@ Core.prototype._redraw = function() {
   // TODO: only calculate autoHeight when needed (else we cause an extra reflow/repaint of the DOM)
   var contentHeight = Math.max(props.left.height, props.center.height, props.right.height);
   var autoHeight = props.top.height + contentHeight + props.bottom.height +
-    borderRootHeight + props.border.top + props.border.bottom;
+    props.borderRootHeight + props.border.top + props.border.bottom;
   dom.root.style.height = util.option.asSize(options.height, autoHeight + 'px');
 
   // calculate heights of the content panels
   props.root.height = dom.root.offsetHeight;
-  props.background.height = props.root.height - borderRootHeight;
+  props.background.height = props.root.height - props.borderRootHeight;
   var containerHeight = props.root.height - props.top.height - props.bottom.height -
-    borderRootHeight;
+    props.borderRootHeight;
   props.centerContainer.height  = containerHeight;
   props.leftContainer.height    = containerHeight;
   props.rightContainer.height   = props.leftContainer.height;
 
   // calculate the widths of the panels
   props.root.width = dom.root.offsetWidth;
-  props.background.width = props.root.width - borderRootWidth;
+  props.background.width = props.root.width - props.borderRootWidth;
 
   if (!this.initialDrawDone) {
     props.scrollbarWidth = util.getScrollBarWidth();
   }
 
-  if (this.options.verticalScroll) {
-    if (this.options.rtl) {
+  if (options.verticalScroll) {
+    if (options.rtl) {
       props.left.width = dom.leftContainer.clientWidth || -props.border.left;
       props.right.width = dom.rightContainer.clientWidth + props.scrollbarWidth || -props.border.right;
     } else {
@@ -857,46 +857,7 @@ Core.prototype._redraw = function() {
     props.right.width = dom.rightContainer.clientWidth || -props.border.right;
   }
 
-  props.leftContainer.width = props.left.width;
-  props.rightContainer.width = props.right.width;
-  var centerWidth = props.root.width - props.left.width - props.right.width - borderRootWidth;
-  props.center.width          = centerWidth;
-  props.centerContainer.width = centerWidth;
-  props.top.width             = centerWidth;
-  props.bottom.width          = centerWidth;
-
-  // resize the panels
-  dom.background.style.height           = props.background.height + 'px';
-  dom.backgroundVertical.style.height   = props.background.height + 'px';
-  dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
-  dom.centerContainer.style.height      = props.centerContainer.height + 'px';
-  dom.leftContainer.style.height        = props.leftContainer.height + 'px';
-  dom.rightContainer.style.height       = props.rightContainer.height + 'px';
-
-  dom.background.style.width            = props.background.width + 'px';
-  dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
-  dom.backgroundHorizontal.style.width  = props.background.width + 'px';
-  dom.centerContainer.style.width       = props.center.width + 'px';
-  dom.top.style.width                   = props.top.width + 'px';
-  dom.bottom.style.width                = props.bottom.width + 'px';
-
-  // reposition the panels
-  dom.background.style.left           = '0';
-  dom.background.style.top            = '0';
-  dom.backgroundVertical.style.left   = (props.left.width + props.border.left) + 'px';
-  dom.backgroundVertical.style.top    = '0';
-  dom.backgroundHorizontal.style.left = '0';
-  dom.backgroundHorizontal.style.top  = props.top.height + 'px';
-  dom.centerContainer.style.left      = props.left.width + 'px';
-  dom.centerContainer.style.top       = props.top.height + 'px';
-  dom.leftContainer.style.left        = '0';
-  dom.leftContainer.style.top         = props.top.height + 'px';
-  dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
-  dom.rightContainer.style.top        = props.top.height + 'px';
-  dom.top.style.left                  = props.left.width + 'px';
-  dom.top.style.top                   = '0';
-  dom.bottom.style.left               = props.left.width + 'px';
-  dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
+  this._setDOM();
 
   // update the scrollTop, feasible range for the offset can be changed
   // when the height of the Core or of the contents of the center changed
@@ -904,17 +865,14 @@ Core.prototype._redraw = function() {
 
   // reposition the scrollable contents
   if (options.orientation.item != 'top') {
-    offset += Math.max(this.props.centerContainer.height - this.props.center.height -
-      this.props.border.top - this.props.border.bottom, 0);
+    offset += Math.max(props.centerContainer.height - props.center.height -
+      props.border.top - props.border.bottom, 0);
   }
-  dom.center.style.left = '0';
   dom.center.style.top  = offset + 'px';
-  dom.left.style.left   = '0';
-  dom.right.style.left  = '0';
   
   // show shadows when vertical scrolling is available
-  var visibilityTop = this.props.scrollTop == 0 ? 'hidden' : '';
-  var visibilityBottom = this.props.scrollTop == this.props.scrollTopMin ? 'hidden' : '';
+  var visibilityTop = props.scrollTop == 0 ? 'hidden' : '';
+  var visibilityBottom = props.scrollTop == props.scrollTopMin ? 'hidden' : '';
   dom.shadowTop.style.visibility          = visibilityTop;
   dom.shadowBottom.style.visibility       = visibilityBottom;
   dom.shadowTopLeft.style.visibility      = visibilityTop;
@@ -922,18 +880,31 @@ Core.prototype._redraw = function() {
   dom.shadowTopRight.style.visibility     = visibilityTop;
   dom.shadowBottomRight.style.visibility  = visibilityBottom;
 
-  if (this.options.verticalScroll) {
+  if (options.verticalScroll) {
+    dom.rightContainer.className = 'vis-panel vis-right vis-vertical-scroll';
+    dom.leftContainer.className = 'vis-panel vis-left vis-vertical-scroll';
+
     dom.shadowTopRight.style.visibility     = "hidden";
     dom.shadowBottomRight.style.visibility  = "hidden";
     dom.shadowTopLeft.style.visibility      = "hidden";
     dom.shadowBottomLeft.style.visibility   = "hidden";
-  } else {
+
+    dom.left.style.top    = '0px';
+    dom.right.style.top   = '0px';
+  }
+
+  if (!options.verticalScroll ||  props.center.height < props.centerContainer.height) {
     dom.left.style.top    = offset + 'px';
     dom.right.style.top   = offset + 'px';
+    dom.rightContainer.className = dom.rightContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
+    dom.leftContainer.className = dom.leftContainer.className.replace(new RegExp('(?:^|\\s)'+ 'vis-vertical-scroll' + '(?:\\s|$)'), ' ');
+    props.left.width = dom.leftContainer.clientWidth  || -props.border.left;
+    props.right.width = dom.rightContainer.clientWidth || -props.border.right;
+    this._setDOM();
   }
 
   // enable/disable vertical panning
-  var contentsOverflow = this.props.center.height > this.props.centerContainer.height;
+  var contentsOverflow = props.center.height > props.centerContainer.height;
   this.hammer.get('pan').set({
     direction: contentsOverflow ? Hammer.DIRECTION_ALL : Hammer.DIRECTION_HORIZONTAL
   });
@@ -954,13 +925,61 @@ Core.prototype._redraw = function() {
   } else {
     this.redrawCount = 0;
   }
-  
   this.initialDrawDone = true;
 
   //Emit public 'changed' event for UI updates, see issue #1592
   this.body.emitter.emit("changed");
 };
 
+Core.prototype._setDOM = function () {
+  var props = this.props;
+  var dom = this.dom;
+
+  props.leftContainer.width = props.left.width;
+  props.rightContainer.width = props.right.width;
+  var centerWidth = props.root.width - props.left.width - props.right.width - props.borderRootWidth;
+  props.center.width          = centerWidth;
+  props.centerContainer.width = centerWidth;
+  props.top.width             = centerWidth;
+  props.bottom.width          = centerWidth;
+
+  // resize the panels
+  dom.background.style.height           = props.background.height + 'px';
+  dom.backgroundVertical.style.height   = props.background.height + 'px';
+  dom.backgroundHorizontal.style.height = props.centerContainer.height + 'px';
+  dom.centerContainer.style.height      = props.centerContainer.height + 'px';
+  dom.leftContainer.style.height        = props.leftContainer.height + 'px';
+  dom.rightContainer.style.height       = props.rightContainer.height + 'px';
+
+  dom.background.style.width            = props.background.width + 'px';
+  dom.backgroundVertical.style.width    = props.centerContainer.width + 'px';
+  dom.backgroundHorizontal.style.width  = props.background.width + 'px';
+  dom.centerContainer.style.width       = props.center.width + 'px';
+  dom.top.style.width                   = props.top.width + 'px';
+  dom.bottom.style.width                = props.bottom.width + 'px';
+
+  // reposition the panels
+  dom.background.style.left           = '0';
+  dom.background.style.top            = '0';
+  dom.backgroundVertical.style.left   = (props.left.width + props.border.left) + 'px';
+  dom.backgroundVertical.style.top    = '0';
+  dom.backgroundHorizontal.style.left = '0';
+  dom.backgroundHorizontal.style.top  = props.top.height + 'px';
+  dom.centerContainer.style.left      = props.left.width + 'px';
+  dom.centerContainer.style.top       = props.top.height + 'px';
+  dom.leftContainer.style.left        = '0';
+  dom.leftContainer.style.top         = props.top.height + 'px';
+  dom.rightContainer.style.left       = (props.left.width + props.center.width) + 'px';
+  dom.rightContainer.style.top        = props.top.height + 'px';
+  dom.top.style.left                  = props.left.width + 'px';
+  dom.top.style.top                   = '0';
+  dom.bottom.style.left               = props.left.width + 'px';
+  dom.bottom.style.top                = (props.top.height + props.centerContainer.height) + 'px';
+  dom.center.style.left               = '0';
+  dom.left.style.left                 = '0';
+  dom.right.style.left                = '0';
+}
+
 // TODO: deprecated since version 1.1.0, remove some day
 Core.prototype.repaint = function () {
   throw new Error('Function repaint is deprecated. Use redraw instead.');