Fixed #116 and #138: bug when rendering the Timeline inside a hidden container.

HISTORY.md

@@ -11,11 +11,12 @@ http://visjs.org
 - Some tweaks in snapping dragged items to nice dates.
 - Made the instance of moment.js packaged with vis.js accessibly via `vis.moment`.
 - Fixed a bug in replacing the DataSet of groups via `Timeline.setGroups(groups)`.
+- Fixed a bug when rendering the Timeline inside a hidden container. 
 
 ### Graph
 
-- added zoomable and moveable options.
-- changes setOptions to avoid resetting view.
+- Added zoomable and moveable options.
+- Changes setOptions to avoid resetting view.
 
 
 ## 2014-05-09, version 1.0.1

src/timeline/component/Group.js

@@ -51,6 +51,14 @@ Group.prototype._create = function() {
   this.dom.background = document.createElement('div');
 
   this.dom.axis = document.createElement('div');
+
+  // create a hidden marker to detect when the Timelines container is attached
+  // to the DOM, or the style of a parent of the Timeline is changed from
+  // display:none is changed to visible.
+  this.dom.marker = document.createElement('div');
+  this.dom.marker.style.visibility = 'hidden';
+  this.dom.marker.innerHTML = '?';
+  this.dom.background.appendChild(this.dom.marker);
 };
 
 /**
@@ -122,6 +130,20 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
 
   this.visibleItems = this._updateVisibleItems(this.orderedItems, this.visibleItems, range);
 
+  // force recalculation of the height of the items when the marker height changed
+  // (due to the Timeline being attached to the DOM or changed from display:none to visible)
+  var markerHeight = this.dom.marker.clientHeight;
+  if (markerHeight != this.lastMarkerHeight) {
+    this.lastMarkerHeight = markerHeight;
+
+    util.forEach(this.items, function (item) {
+      item.dirty = true;
+      if (item.displayed) item.repaint();
+    });
+
+    restack = true;
+  }
+
   // reposition visible items vertically
   if (this.itemSet.options.stack) { // TODO: ugly way to access options...
     stack.stack(this.visibleItems, margin, restack);
@@ -129,7 +151,6 @@ Group.prototype.repaint = function repaint(range, margin, restack) {
   else { // no stacking
     stack.nostack(this.visibleItems, margin);
   }
-  this.stackDirty = false;
   for (var i = 0, ii = this.visibleItems.length; i < ii; i++) {
     var item = this.visibleItems[i];
     item.repositionY();

src/timeline/component/TimeAxis.js

@@ -407,8 +407,12 @@ TimeAxis.prototype._repaintLine = function() {
  * @private
  */
 TimeAxis.prototype._calculateCharSize = function () {
+  // Note: We only calculate char size once, but in case it is calculated as zero,
+  //       we will recalculate. This is the case if any of the timelines parents
+  //       has display:none for example.
+
   // determine the char width and height on the minor axis
-  if (!('minorCharHeight' in this.props)) {
+  if (!('minorCharHeight' in this.props) || this.props.minorCharHeight == 0) {
     var textMinor = document.createTextNode('0');
     var measureCharMinor = document.createElement('DIV');
     measureCharMinor.className = 'text minor measure';
@@ -421,7 +425,8 @@ TimeAxis.prototype._calculateCharSize = function () {
     this.frame.removeChild(measureCharMinor);
   }
 
-  if (!('majorCharHeight' in this.props)) {
+  // determine the char width and height on the major axis
+  if (!('majorCharHeight' in this.props) || this.props.majorCharHeight == 0) {
     var textMajor = document.createTextNode('0');
     var measureCharMajor = document.createElement('DIV');
     measureCharMajor.className = 'text major measure';