Fixed height of BackgroundItems not being 100% when timeline has a fixed height

HISTORY.md

@@ -14,6 +14,11 @@ http://visjs.org
 - Fixed cluster fontsize scaling.
 - Fixed cluster sector scaling.
 
+### Timeline
+
+- Fixed height of BackgroundItems not being 100% when timeline has a fixed height.
+- Fixed width of BackgroundItems not being reduced to 0 when zooming out.
+
 ### DataSet
 
 - Event listeners of `update` now receive an extra property `data`, 

dist/vis.css

@@ -138,6 +138,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
+  overflow: visible;
 }
 
 .vis.timeline .axis {
@@ -214,8 +215,8 @@
   border: none;
   background-color: rgba(213, 221, 246, 0.4);
   box-sizing: border-box;
-  top: 0;
-  bottom: 0;
+  padding: 0;
+  margin: 0;
 }
 
 .vis.timeline .item.range .content {
@@ -232,13 +233,6 @@
   max-width: 100%;
   margin: 5px;
 }
-.vis.timeline .item.background .noContent {
-    position: absolute;
-    display: inline-block;
-    overflow: hidden;
-    max-width: 100%;
-    margin: 0px;
-}
 
 .vis.timeline .item.line {
   padding: 0;

lib/timeline/component/css/item.css

@@ -56,8 +56,6 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  top: 0;
-  bottom: 0;
 }
 
 .vis.timeline .item.range .content {

lib/timeline/component/css/itemset.css

@@ -12,6 +12,7 @@
   position: absolute;
   width: 100%;
   height: 100%;
+  overflow: visible;
 }
 
 .vis.timeline .axis {

lib/timeline/component/item/BackgroundItem.js

@@ -81,7 +81,7 @@ BackgroundItem.prototype.redraw = function() {
   if (!dom.box.parentNode) {
     var background = this.parent.dom.background;
     if (!background) {
-      throw new Error('Cannot redraw time axis: parent has no background container element');
+      throw new Error('Cannot redraw item: parent has no background container element');
     }
     background.appendChild(dom.box);
   }
@@ -138,6 +138,12 @@ BackgroundItem.prototype.repositionY = function() {
   var onTop = this.options.orientation === 'top';
   this.dom.content.style.top = onTop ? '' : '0';
   this.dom.content.style.bottom = onTop ? '0' : '';
+
+  var height = Math.max(this.parent.height,
+      this.parent.itemSet.body.domProps.centerContainer.height);
+  this.dom.box.style.top = onTop ? '0' : '';
+  this.dom.box.style.bottom = onTop ? '' : '0';
+  this.dom.box.style.height = height + 'px';
 };
 
 module.exports = BackgroundItem;

lib/timeline/component/item/BoxItem.js

@@ -84,17 +84,17 @@ BoxItem.prototype.redraw = function() {
   }
   if (!dom.box.parentNode) {
     var foreground = this.parent.dom.foreground;
-    if (!foreground) throw new Error('Cannot redraw time axis: parent has no foreground container element');
+    if (!foreground) throw new Error('Cannot redraw item: parent has no foreground container element');
     foreground.appendChild(dom.box);
   }
   if (!dom.line.parentNode) {
     var background = this.parent.dom.background;
-    if (!background) throw new Error('Cannot redraw time axis: parent has no background container element');
+    if (!background) throw new Error('Cannot redraw item: parent has no background container element');
     background.appendChild(dom.line);
   }
   if (!dom.dot.parentNode) {
     var axis = this.parent.dom.axis;
-    if (!background) throw new Error('Cannot redraw time axis: parent has no axis container element');
+    if (!background) throw new Error('Cannot redraw item: parent has no axis container element');
     axis.appendChild(dom.dot);
   }
   this.displayed = true;

lib/timeline/component/item/PointItem.js

@@ -83,7 +83,7 @@ PointItem.prototype.redraw = function() {
   if (!dom.point.parentNode) {
     var foreground = this.parent.dom.foreground;
     if (!foreground) {
-      throw new Error('Cannot redraw time axis: parent has no foreground container element');
+      throw new Error('Cannot redraw item: parent has no foreground container element');
     }
     foreground.appendChild(dom.point);
   }

lib/timeline/component/item/RangeItem.js

@@ -78,7 +78,7 @@ RangeItem.prototype.redraw = function() {
   if (!dom.box.parentNode) {
     var foreground = this.parent.dom.foreground;
     if (!foreground) {
-      throw new Error('Cannot redraw time axis: parent has no foreground container element');
+      throw new Error('Cannot redraw item: parent has no foreground container element');
     }
     foreground.appendChild(dom.box);
   }