diff --git a/docs/timeline.html b/docs/timeline.html
index 86ccd258..66efe864 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -466,9 +466,7 @@ var options = {
   <td>showCustomTime</td>
   <td>boolean</td>
   <td>false</td>
-  <td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future.
-    <!-- TODO: more docs on showCustomTime
-    When the custom time bar is dragged by the user, an event is triggered, on which the contents of the timeline can be changed in to the state at that moment in time.--></td>
+  <td>Show a vertical bar displaying a custom time. This line can be dragged by the user. The custom time can be utilized to show a state in the past or in the future. When the custom time bar is dragged by the user, the event <code>timechange</code> is fired repeatedly. After the bar is dragged, the event <code>timechanged</code> is fired once.</td>
 </tr>
 
 <tr>
diff --git a/examples/timeline/01_basic.html b/examples/timeline/01_basic.html
index 514eefd1..b196a78c 100644
--- a/examples/timeline/01_basic.html
+++ b/examples/timeline/01_basic.html
@@ -21,7 +21,7 @@
     {id: 1, content: 'item 1', start: '2013-04-20'},
     {id: 2, content: 'item 2', start: '2013-04-14'},
     {id: 3, content: 'item 3', start: '2013-04-18'},
-    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
+    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19', type:'rangeoverflow'},
     {id: 5, content: 'item 5', start: '2013-04-25'},
     {id: 6, content: 'item 6', start: '2013-04-27'}
   ];
diff --git a/src/timeline/Stack.js b/src/timeline/Stack.js
index 1d014207..a551ece0 100644
--- a/src/timeline/Stack.js
+++ b/src/timeline/Stack.js
@@ -183,8 +183,8 @@ Stack.prototype.checkOverlap = function checkOverlap (items, itemIndex,
  * @return {boolean}        true if a and b collide, else false
  */
 Stack.prototype.collision = function collision (a, b, margin) {
-  return ((a.left - margin) < (b.left + b.getWidth()) &&
-      (a.left + a.getWidth() + margin) > b.left &&
+  return ((a.left - margin) < (b.left + b.width) &&
+      (a.left + a.width + margin) > b.left &&
       (a.top - margin) < (b.top + b.height) &&
       (a.top + a.height + margin) > b.top);
 };
diff --git a/src/timeline/component/item/Item.js b/src/timeline/component/item/Item.js
index cdb69c76..f0deaec0 100644
--- a/src/timeline/component/item/Item.js
+++ b/src/timeline/component/item/Item.js
@@ -80,11 +80,3 @@ Item.prototype.reflow = function reflow() {
 Item.prototype.setOffset = function setOffset(offset) {
   this.offset = offset;
 };
-
-/**
- * Return the items width
- * @return {Number} width
- */
-Item.prototype.getWidth = function getWidth() {
-  return this.width;
-};
diff --git a/src/timeline/component/item/ItemRangeOverflow.js b/src/timeline/component/item/ItemRangeOverflow.js
index 4e0d4cbb..c3133dae 100644
--- a/src/timeline/component/item/ItemRangeOverflow.js
+++ b/src/timeline/component/item/ItemRangeOverflow.js
@@ -16,6 +16,22 @@ function ItemRangeOverflow (parent, data, options, defaultOptions) {
     }
   };
 
+  // define a private property _width, which is the with of the range box
+  // adhering to the ranges start and end date. The property width has a
+  // getter which returns the max of border width and content width
+  this._width = 0;
+  Object.defineProperty(this, 'width', {
+    get: function () {
+      return (this.props.content && this._width < this.props.content.width) ?
+          this.props.content.width :
+          this._width;
+    },
+
+    set: function (width) {
+      this._width = width;
+    }
+  });
+
   ItemRange.call(this, parent, data, options, defaultOptions);
 }
 
@@ -62,7 +78,7 @@ ItemRangeOverflow.prototype.repaint = function repaint() {
         dom.content.innerHTML = this.content;
       }
       else {
-        throw new Error('Property "content" missing in item ' + this.data.id);
+        throw new Error('Property "content" missing in item ' + this.id);
       }
       changed = true;
     }
@@ -80,12 +96,19 @@ ItemRangeOverflow.prototype.repaint = function repaint() {
 };
 
 /**
- * Return the items width
- * @return {Number} width
+ * Reposition the item, recalculate its left, top, and width, using the current
+ * range and size of the items itemset
+ * @override
  */
-ItemRangeOverflow.prototype.getWidth = function getWidth() {
-  if (this.props.content !== undefined && this.width < this.props.content.width)
-    return this.props.content.width;
-  else
-    return this.width;
+ItemRangeOverflow.prototype.reposition = function reposition() {
+  var dom = this.dom,
+      props = this.props;
+
+  if (dom) {
+    dom.box.style.top = this.top + 'px';
+    dom.box.style.left = this.left + 'px';
+    dom.box.style.width = this._width + 'px';
+
+    dom.content.style.left = props.content.left + 'px';
+  }
 };