Fixed another bug related to overflowing contents (#459)

lib/timeline/component/css/item.css

@@ -47,7 +47,6 @@
   border-style: solid;
   border-radius: 2px;
   box-sizing: border-box;
-  overflow: hidden;
 }
 
 .vis.timeline .item.background {
@@ -62,6 +61,7 @@
 .vis.timeline .item.range .content {
   position: relative;
   display: inline-block;
+  max-width: 100%;
   overflow: hidden;
 }
 

lib/timeline/component/item/RangeItem.js

@@ -103,8 +103,12 @@ RangeItem.prototype.redraw = function() {
     this.overflow = window.getComputedStyle(dom.content).overflow !== 'hidden';
 
     // recalculate size
+    // turn off max-width to be able to calculate the real width
+    // this causes an extra browser repaint/reflow, but so be it
+    this.dom.content.style.maxWidth = 'none';
     this.props.content.width = this.dom.content.offsetWidth;
     this.height = this.dom.box.offsetHeight;
+    this.dom.content.style.maxWidth = '';
 
     this.dirty = false;
   }
@@ -175,7 +179,7 @@ RangeItem.prototype.repositionX = function() {
   else {
     this.left = start;
     this.width = boxWidth;
-    contentWidth = Math.min(end - start, this.props.content.width);
+    contentWidth = Math.min(end - start - 2 * this.options.padding, this.props.content.width);
   }
 
   this.dom.box.style.left = this.left + 'px';
@@ -195,15 +199,19 @@ RangeItem.prototype.repositionX = function() {
       break;
 
     default: // 'auto'
+      // when range exceeds left of the window, position the contents at the left of the visible area
       if (this.overflow) {
-        // when range exceeds left of the window, position the contents at the left of the visible area
-        contentLeft = Math.max(-start, 0);
+        if (end > 0) {
+          contentLeft = Math.max(-start, 0);
+        }
+        else {
+          contentLeft = -contentWidth; // ensure it's not visible anymore
+        }
       }
       else {
-        // when range exceeds left of the window, position the contents at the left of the visible area
         if (start < 0) {
           contentLeft = Math.min(-start,
-              (end - start - this.props.content.width - 2 * this.options.padding));
+              (end - start - contentWidth - 2 * this.options.padding));
           // TODO: remove the need for options.padding. it's terrible.
         }
         else {

test/timeline.html

@@ -75,7 +75,7 @@
         '<div onclick="alert(\'you clicked a div\');   ">Click here! (div)</div>', start: now.clone().add(-2, 'days').toDate() },
     {_id: 3, content: 'item 3', start: now.clone().add(2, 'days').toDate(), style: 'color: red;'},
     {
-      _id: 4, content: 'item 4 ',
+      _id: 4, content: 'item 4 foo bar foo bar foo bar foo bar foo bar',
       start: now.clone().add(0, 'days').toDate(),
       end: now.clone().add(7, 'days').toDate(),
       title: 'hello title!'