Fixed an overflow issue with the dots of BoxItems

dist/vis.css

@@ -143,8 +143,9 @@
 .vis.timeline .axis {
   position: absolute;
   width: 100%;
-  height: 0;
   left: 0;
+  top: 0;
+  overflow: hidden;
 }
 
 .vis.timeline  .foreground .group {

lib/timeline/component/ItemSet.js

@@ -476,6 +476,10 @@ ItemSet.prototype.redraw = function() {
       frame = this.dom.frame,
       editable = options.editable.updateTime || options.editable.updateGroup;
 
+  // recalculate absolute position (before redrawing groups)
+  this.props.top = this.body.domProps.top.height + this.body.domProps.border.top;
+  this.props.left = this.body.domProps.left.width + this.body.domProps.border.left;
+
   // update class name
   frame.className = 'itemset' + (editable ? ' editable' : '');
 
@@ -515,17 +519,12 @@ ItemSet.prototype.redraw = function() {
   // update frame height
   frame.style.height  = asSize(height);
 
-  // calculate actual size and position
-  this.props.top = frame.offsetTop;
-  this.props.left = frame.offsetLeft;
+  // calculate actual size
   this.props.width = frame.offsetWidth;
   this.props.height = height;
 
   // reposition axis
-  this.dom.axis.style.top = asSize((orientation == 'top') ?
-      (this.body.domProps.top.height + this.body.domProps.border.top) :
-      (this.body.domProps.top.height + this.body.domProps.centerContainer.height));
-  this.dom.axis.style.left = '0';
+  this.dom.axis.style.height = this.body.domProps.background.height + 'px';
 
   // check if this component is resized
   resized = this._isResized() || resized;

lib/timeline/component/css/itemset.css

@@ -17,8 +17,9 @@
 .vis.timeline .axis {
   position: absolute;
   width: 100%;
-  height: 0;
   left: 0;
+  top: 0;
+  overflow: hidden;
 }
 
 .vis.timeline  .foreground .group {

lib/timeline/component/item/BoxItem.js

@@ -206,6 +206,7 @@ BoxItem.prototype.repositionY = function() {
     line.style.top    = '0';
     line.style.height = (this.parent.top + this.top + 1) + 'px';
     line.style.bottom = '';
+    dot.style.top     = (this.parent.itemSet.props.top -this.props.dot.height / 2) + 'px';
   }
   else { // orientation 'bottom'
     var itemSetHeight = this.parent.itemSet.props.height; // TODO: this is nasty
@@ -214,9 +215,8 @@ BoxItem.prototype.repositionY = function() {
     box.style.top     = (this.parent.height - this.top - this.height || 0) + 'px';
     line.style.top    = (itemSetHeight - lineHeight) + 'px';
     line.style.bottom = '0';
+    dot.style.top     = (itemSetHeight - this.props.dot.height / 2) + 'px';
   }
-
-  dot.style.top = (-this.props.dot.height / 2) + 'px';
 };
 
 module.exports = BoxItem;

test/timeline_groups.html

@@ -15,9 +15,6 @@
     }
   </style>
 
-  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
-  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment.min.js"></script>
-
   <script src="../dist/vis.js"></script>
   <link href="../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
@@ -43,6 +40,8 @@
 <div id="visualization"></div>
 
 <script>
+  var moment = vis.moment;
+
   var now = moment().minutes(0).seconds(0).milliseconds(0);
   var groupCount = 3;
   var itemCount = 20;