Одинаковая высота для всех элементов в группе на временной шкале с помощью vis.js

Я использую vis.js для отображения временной шкалы со смежными не сложенными элементами.

У некоторых элементов содержание больше, чем у других, и мне бы хотелось, чтобы все элементы в одной группе имели одинаковую высоту.

Содержимое является динамическим, поэтому я не могу указать фиксированную минимальную или максимальную высоту в параметрах.

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/

Тип 'background' близок к тому, что я хочу, но элемент больше не активен.

Я попытался настроить свойства CSS, но свойство top элемента вычисляется динамически, и я не нашел правила, которое обрабатывало бы все.

1 ответ

Я думаю style Атрибут это то, что вы ищете. Вы можете использовать style Атрибут параметров элемента для определения стилей CSS для отдельных элементов.

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

Рабочую демоверсию можно найти здесь.

Другие вопросы по тегам