Added extra div to background items too

examples/timeline/18_range_overflow.html

@@ -11,7 +11,7 @@
       font-family: sans-serif;
     }
 
-    .vis-item.vis-range .vis-item-frame {
+    .vis-item .vis-item-frame {
       overflow: visible;
     }
   </style>
@@ -22,7 +22,7 @@
   In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
 </p>
 <pre>
-.vis-item.vis-range .vis-item-frame {
+.vis-item .vis-item-frame {
   overflow: visible;
 }
 </pre>

lib/timeline/component/css/item.css

@@ -57,25 +57,23 @@
   margin: 0;
 }
 
-.vis-item.vis-range .vis-item-content {
+.vis-item .vis-item-frame {
   position: relative;
-  display: inline-block;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
   overflow: hidden;
-  /*max-width: 100%;*/
 }
 
-.vis-item.vis-range .vis-item-frame {
+.vis-item.vis-range .vis-item-content {
   position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
+  display: inline-block;
 }
 
 .vis-item.background .vis-item-content {
   position: absolute;
   display: inline-block;
-  max-width: 100%;
-  margin: 5px;
 }
 
 .vis-item.vis-line {
@@ -106,6 +104,7 @@
   position: absolute;
   width: 24px;
   max-width: 20%;
+  min-width: 2px;
   height: 100%;
   top: 0;
   left: -4px;
@@ -117,6 +116,7 @@
   position: absolute;
   width: 24px;
   max-width: 20%;
+  min-width: 2px;
   height: 100%;
   top: 0;
   right: -4px;

lib/timeline/component/item/BackgroundItem.js

@@ -33,8 +33,6 @@ function BackgroundItem (data, conversion, options) {
   }
 
   Item.call(this, data, conversion, options);
-
-  this.emptyContent = false;
 }
 
 BackgroundItem.prototype = new Item (null, null, null);
@@ -66,10 +64,15 @@ BackgroundItem.prototype.redraw = function() {
     dom.box = document.createElement('div');
     // className is updated in redraw()
 
+    // frame box (to prevent the item contents from overflowing
+    dom.frame = document.createElement('div');
+    dom.frame.className = 'vis-item-frame';
+    dom.box.appendChild(dom.frame);
+
     // contents box
     dom.content = document.createElement('div');
     dom.content.className = 'vis-item-content';
-    dom.box.appendChild(dom.content);
+    dom.frame.appendChild(dom.content);
 
     // Note: we do NOT attach this item as attribute to the DOM,
     //       such that background items cannot be selected