CODEWITHSUNDEEP
javascriptvis.jsvis.js-timeline
Joffrey Schmitz
Joffrey Schmitz

Reputation: 2438

Same height for all items in a group in timeline with vis.js

I am using vis.js to display a timeline with contiguous non-stacked items.

Some items have a content longer than others and I would like that all items in the same group have the same height.

The content is dynamic, so I cannot provide a fixed minimum or maximum height in the options.

var groups = new vis.DataSet([{id: 'first', content: 'group 1'}, {id: 'second', content: 'group 2'}]);

var items = new vis.DataSet({});
items.add([
        {id: 0, content: 'item 0', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'first'},
        {id: 1, content: 'item 1 <br />long title', start: '2014-01-26T12:00:00', end: '2014-01-29T12:00:00',group:'first'},
        {id: 2, content: 'item 2', start: '2014-01-29T12:00:00', end: '2014-01-31T12:00:00',group:'first'},

        {id: 3, content: 'item 3<br/>Very long<br/>description', start: '2014-01-20T12:00:01', end: '2014-01-24T12:00:00',group:'second'},
        {id: 4, content: 'item 4', start: '2014-01-24T12:00:00', end: '2014-01-26T12:00:00',group:'second'},
        {id: 5, content: 'item 5<br/>Description', start: '2014-01-26T12:00:00', end: '2014-01-29T12:00:00', type: 'range', group:'second'},
        {id: 6, content: 'item 6<br/>Description', start: '2014-01-29T12:00:00', end: '2014-01-31T12:00:00', type: 'background', style:'background-color: yellow', group:'second'},

]);

var container = document.getElementById('visualization');

https://jsfiddle.net/jschmitz/13suvyp8/12/

The type 'background' is near to what I want, but the item is not clickable anymore.

I tried to tweak the CSS properties, but the top property of the item is dynamically computed, and I didn't find a rule that handle everything.

Upvotes: 2

Views: 2640

Answers (1)

Chamath Ranasinghe
Chamath Ranasinghe

Reputation: 422

I think style attribute is what you are looking for. You can use the style attribute of the item options to define css styles for individual items. 

items = [{id: 4, content: 'item 4', start: '2014-01-24T12:00:00', end: '2014-01-26T12:00:00',group:'second', style:'height:100px'},]

A working demo can be found here.

Upvotes: 0

Related Questions