Some fixes in positioning of groups

src/timeline/Timeline.js

@@ -114,7 +114,7 @@ function Timeline (container, items, options) {
     this.customtime = new CustomTime(this.timeaxis, [], rootOptions);
     this.controller.add(this.customtime);
 
-    // create itemset or groupset
+    // create groupset
     this.setGroups(null);
 
     this.itemsData = null;      // DataSet
@@ -125,7 +125,7 @@ function Timeline (container, items, options) {
         this.setOptions(options);
     }
 
-    // set data (must be after options are applied)
+    // create itemset and groupset
     if (items) {
         this.setItems(items);
     }
@@ -233,8 +233,8 @@ Timeline.prototype.setGroups = function(groups) {
     this.groupsData = groups;
 
     // switch content type between ItemSet or GroupSet when needed
-    var type = this.groupsData ? GroupSet : ItemSet;
-    if (!(this.content instanceof type)) {
+    var Type = this.groupsData ? GroupSet : ItemSet;
+    if (!(this.content instanceof Type)) {
         // remove old content set
         if (this.content) {
             this.content.hide();
@@ -262,6 +262,9 @@ Timeline.prototype.setGroups = function(groups) {
             width: '100%',
             height: function () {
                 if (me.options.height) {
+                    if (!util.isNumber(me.options.height)) {
+                        throw new TypeError('Number expected for property height');
+                    }
                     return me.itemPanel.height - me.timeaxis.height;
                 }
                 else {
@@ -283,7 +286,8 @@ Timeline.prototype.setGroups = function(groups) {
                 return me.labelPanel.getContainer();
             }
         });
-        this.content = new type(this.itemPanel, [this.timeaxis], options);
+
+        this.content = new Type(this.itemPanel, [this.timeaxis], options);
         if (this.content.setRange) {
             this.content.setRange(this.range);
         }

src/timeline/component/GroupSet.js

@@ -161,7 +161,8 @@ GroupSet.prototype.repaint = function repaint() {
         asElement = util.option.asElement,
         options = this.options,
         frame = this.dom.frame,
-        labels = this.dom.labels;
+        labels = this.dom.labels,
+        labelSet = this.dom.labelSet;
 
     // create frame
     if (!this.parent) {
@@ -196,9 +197,14 @@ GroupSet.prototype.repaint = function repaint() {
     if (!labels) {
         labels = document.createElement('div');
         labels.className = 'labels';
-        //frame.appendChild(labels);
         this.dom.labels = labels;
     }
+    if (!labelSet) {
+        labelSet = document.createElement('div');
+        labelSet.className = 'label-set';
+        labels.appendChild(labelSet);
+        this.dom.labelSet = labelSet;
+    }
     if (!labels.parentNode || labels.parentNode != labelContainer) {
         if (labels.parentNode) {
             labels.parentNode.removeChild(labels.parentNode);
@@ -213,7 +219,8 @@ GroupSet.prototype.repaint = function repaint() {
     changed += update(frame.style, 'width',  asSize(options.width, '100%'));
 
     // reposition labels
-    changed += update(labels.style, 'top',    asSize(options.top, '0px'));
+    changed += update(labelSet.style, 'top',    asSize(options.top, '0px'));
+    changed += update(labelSet.style, 'height', asSize(options.height, this.height + 'px'));
 
     var me = this,
         queue = this.queue,
@@ -233,6 +240,11 @@ GroupSet.prototype.repaint = function repaint() {
                 case 'update':
                     if (!group) {
                         var groupOptions = Object.create(me.options);
+                        util.extend(groupOptions, {
+                            height: null,
+                            maxHeight: null
+                        });
+
                         group = new Group(me, id, groupOptions);
                         group.setItems(me.itemsData); // attach items data
                         groups[id] = group;
@@ -288,13 +300,13 @@ GroupSet.prototype.repaint = function repaint() {
         }
 
         // (re)create the labels
-        while (labels.firstChild) {
-            labels.removeChild(labels.firstChild);
+        while (labelSet.firstChild) {
+            labelSet.removeChild(labelSet.firstChild);
         }
         for (i = 0; i < orderedGroups.length; i++) {
             id = orderedGroups[i];
             label = this._createLabel(id);
-            labels.appendChild(label);
+            labelSet.appendChild(label);
         }
 
         changed++;

src/timeline/component/RootPanel.js

@@ -45,12 +45,6 @@ RootPanel.prototype.repaint = function () {
 
     if (!frame) {
         frame = document.createElement('div');
-        frame.className = 'vis timeline rootpanel';
-
-        var className = options.className;
-        if (className) {
-            util.addClassName(frame, util.option.asString(className));
-        }
 
         this.frame = frame;
 
@@ -64,6 +58,12 @@ RootPanel.prototype.repaint = function () {
         changed += 1;
     }
 
+    frame.className = 'vis timeline rootpanel ' + options.orientation;
+    var className = options.className;
+    if (className) {
+        util.addClassName(frame, util.option.asString(className));
+    }
+
     changed += update(frame.style, 'top',    asSize(options.top, '0px'));
     changed += update(frame.style, 'left',   asSize(options.left, '0px'));
     changed += update(frame.style, 'width',  asSize(options.width, '100%'));

src/timeline/component/TimeAxis.js

@@ -104,7 +104,7 @@ TimeAxis.prototype.repaint = function () {
         this.frame = frame;
         changed += 1;
     }
-    frame.className = 'axis ' + orientation;
+    frame.className = 'axis';
     // TODO: custom className?
 
     if (!frame.parentNode) {

src/timeline/component/css/groupset.css

@@ -20,16 +20,40 @@
     -moz-box-sizing: border-box;
 }
 
-.vis.timeline .labels .label {
+.vis.timeline .labels .label-set {
     position: absolute;
-    left: 0;
     top: 0;
+    left: 0;
     width: 100%;
+    height: 100%;
+
+    overflow: hidden;
+
+    border-top: none;
     border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labels .label-set .label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
     color: #4d4d4d;
 }
 
-.vis.timeline .labels .label .inner {
+.vis.timeline.top .labels .label-set .label,
+.vis.timeline.top .groupset .itemset-axis {
+border-top: 1px solid #bfbfbf;
+    border-bottom: none;
+}
+
+.vis.timeline.bottom .labels .label-set .label,
+.vis.timeline.bottom .groupset .itemset-axis {
+    border-top: none;
+    border-bottom: 1px solid #bfbfbf;
+}
+
+.vis.timeline .labels .label-set .label .inner {
     display: inline-block;
     padding: 5px;
 }

src/timeline/component/css/itemset.css

@@ -15,13 +15,3 @@
 .vis.timeline .itemset-axis {
     position: absolute;
 }
-
-.vis.timeline .groupset .itemset-axis {
-    border-top: 1px solid #bfbfbf;
-}
-
-/* TODO: with orientation=='bottom', this will more or less overlap with timeline axis
-.vis.timeline .groupset .itemset-axis:last-child {
-    border-top: none;
-}
-*/

test/timeline.html

@@ -66,6 +66,7 @@
             start: now.clone().add('days', -7),
             end: now.clone().add('days', 7),
             //maxHeight: 200,
+            height: 200,
             //start: moment('2013-01-01'),
             //end: moment('2013-12-31'),
             min: moment('2013-01-01'),