Fixed #1076: Fixed possible overlap of minor labels text on the TimeAxis

HISTORY.md

@@ -16,6 +16,7 @@ http://visjs.org
 ### Timeline
 
 - Implemented support for group templates (#996). Thanks @hansmaulwurf23.
+- Fixed #1076: Fixed possible overlap of minor labels text on the TimeAxis. 
 - Fixed #1001: First element of group style being cut.
 - Fixed #1071: HTML contents of a group not cleared when the contents is updated.
 - Fixed #1033: Moved item data not updated in DataSet when using an asynchronous

lib/timeline/component/TimeAxis.js

@@ -223,6 +223,7 @@ TimeAxis.prototype._repaintLabels = function () {
   var xPrev = 0;
   var width = 0;
   var prevLine;
+  var prevText;
   var xFirstMajorLabel = undefined;
   var max = 0;
   var className;
@@ -241,9 +242,12 @@ TimeAxis.prototype._repaintLabels = function () {
     if (prevLine) {
       prevLine.style.width = width + 'px';
     }
+    if (prevText) {
+      prevText.style.width = width + 'px';
+    }
 
     if (this.options.showMinorLabels) {
-      this._repaintMinorText(x, step.getLabelMinor(), orientation, className);
+      prevText = this._repaintMinorText(x, step.getLabelMinor(), orientation, className);
     }
 
     if (isMajor && this.options.showMajorLabels) {
@@ -290,6 +294,7 @@ TimeAxis.prototype._repaintLabels = function () {
  * @param {String} text
  * @param {String} orientation   "top" or "bottom" (default)
  * @param {String} className
+ * @return {Element} Returns the HTML element of the created label
  * @private
  */
 TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className) {
@@ -311,6 +316,8 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className
   label.style.left = x + 'px';
   label.className = 'vis-text vis-minor ' + className;
   //label.title = title;  // TODO: this is a heavy operation
+
+  return label;
 };
 
 /**
@@ -319,6 +326,7 @@ TimeAxis.prototype._repaintMinorText = function (x, text, orientation, className
  * @param {String} text
  * @param {String} orientation   "top" or "bottom" (default)
  * @param {String} className
+ * @return {Element} Returns the HTML element of the created label
  * @private
  */
 TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className) {
@@ -340,6 +348,8 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation, className
 
   label.style.top = (orientation == 'top') ? '0' : (this.props.minorLabelHeight  + 'px');
   label.style.left = x + 'px';
+
+  return label;
 };
 
 /**

lib/timeline/component/css/timeaxis.css

@@ -21,6 +21,9 @@
   position: absolute;
   color: #4d4d4d;
   padding: 3px;
+  overflow: hidden;
+  box-sizing: border-box;
+
   white-space: nowrap;
 }