From 1d3ec56c4909b8f56b95328d09daa9d57387b224 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Wed, 29 Apr 2015 12:19:10 +0200
Subject: [PATCH] Added extra div to background items too

---
 examples/timeline/18_range_overflow.html      |  4 ++--
 lib/timeline/component/css/item.css           | 18 +++++++++---------
 lib/timeline/component/item/BackgroundItem.js |  9 ++++++---
 3 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/examples/timeline/18_range_overflow.html b/examples/timeline/18_range_overflow.html
index e5fe2fd5..b1636ad7 100644
--- a/examples/timeline/18_range_overflow.html
+++ b/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>
diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css
index 8cbd0703..c69ecb0c 100644
--- a/lib/timeline/component/css/item.css
+++ b/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;
diff --git a/lib/timeline/component/item/BackgroundItem.js b/lib/timeline/component/item/BackgroundItem.js
index 6ab6e165..62493dc6 100644
--- a/lib/timeline/component/item/BackgroundItem.js
+++ b/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