Vertical grid lines now have a width, filling the gap up to the next grid line

lib/timeline/component/TimeAxis.js

@@ -203,17 +203,23 @@ TimeAxis.prototype._repaintLabels = function () {
   dom.minorLines = [];
   dom.minorTexts = [];
 
-  step.first();
+  var cur;
+  var x = 0;
+  var isMajor;
+  var xPrev = 0;
+  var width = 0;
   var xFirstMajorLabel = undefined;
   var max = 0;
+
+  step.first();
   while (step.hasNext() && max < 1000) {
     max++;
-    var cur = step.getCurrent();
-    var x = this.body.util.toScreen(cur);
-    var isMajor = step.isMajor();
-
+    cur = step.getCurrent();
+    isMajor = step.isMajor();
 
-    // TODO: lines must have a width, such that we can create css backgrounds
+    xPrev = x;
+    x = this.body.util.toScreen(cur);
+    width = x - xPrev;
 
     if (this.options.showMinorLabels) {
       this._repaintMinorText(x, step.getLabelMinor(), orientation);
@@ -227,11 +233,11 @@ TimeAxis.prototype._repaintLabels = function () {
         this._repaintMajorText(x, step.getLabelMajor(), orientation);
       }
       if (this.options.showMajorLines == true) {
-        this._repaintMajorLine(x, orientation);
+        this._repaintMajorLine(x, width, orientation);
       }
     }
     else if (this.options.showMinorLines == true) {
-      this._repaintMinorLine(x, orientation);
+      this._repaintMinorLine(x, width, orientation);
     }
 
     step.next();
@@ -318,10 +324,11 @@ TimeAxis.prototype._repaintMajorText = function (x, text, orientation) {
 /**
  * Create a minor line for the axis at position x
  * @param {Number} x
+ * @param {Number} width
  * @param {String} orientation   "top" or "bottom" (default)
  * @private
  */
-TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
+TimeAxis.prototype._repaintMinorLine = function (x, width, orientation) {
   // reuse redundant line
   var line = this.dom.redundant.minorLines.shift();
 
@@ -341,16 +348,18 @@ TimeAxis.prototype._repaintMinorLine = function (x, orientation) {
     line.style.top = this.body.domProps.top.height + 'px';
   }
   line.style.height = props.minorLineHeight + 'px';
+  line.style.width = width + 'px';
   line.style.left = (x - props.minorLineWidth / 2) + 'px';
 };
 
 /**
  * Create a Major line for the axis at position x
  * @param {Number} x
+ * @param {Number} width
  * @param {String} orientation   "top" or "bottom" (default)
  * @private
  */
-TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
+TimeAxis.prototype._repaintMajorLine = function (x, width, orientation) {
   // reuse redundant line
   var line = this.dom.redundant.majorLines.shift();
 
@@ -370,6 +379,7 @@ TimeAxis.prototype._repaintMajorLine = function (x, orientation) {
     line.style.top = this.body.domProps.top.height + 'px';
   }
   line.style.left = (x - props.majorLineWidth / 2) + 'px';
+  line.style.width = width + 'px';
   line.style.height = props.majorLineHeight + 'px';
 };