diff --git a/HISTORY.md b/HISTORY.md index 03658203..d0a740df 100644 --- a/HISTORY.md +++ b/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 diff --git a/src/timeline/component/Group.js b/src/timeline/component/Group.js index f1fa1791..2144fbb8 100644 --- a/src/timeline/component/Group.js +++ b/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(); diff --git a/src/timeline/component/TimeAxis.js b/src/timeline/component/TimeAxis.js index f56d56da..9f8d48a2 100644 --- a/src/timeline/component/TimeAxis.js +++ b/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';