Выравнивание выпадающего меню на временной шкале Vis.js

Я создаю сайт, включая визуализацию временной шкалы Vis.js. Для одной части сайта я хотел бы добавить выпадающее меню для групп в левой части экрана.

Проблема в том, что элементы временной шкалы появляются в верхней части раскрывающегося списка, и ни одна из комбинаций Z-индексов, которые я решил попробовать, не сработала.

Вот JSFiddle, демонстрирующий проблему: https://jsfiddle.net/vw4sjutt/14/

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

Вот мой HTML:

<html>
<head>
    <link rel="stylesheet" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
    <link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="visualization"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
</body>
</html>

И вот мой JavaScript:

var groups = new vis.DataSet([
    {"content": "Formula E", "id": "Formula E", "value": 1, className:'openwheel'},
    {"content": "WRC", "id": "WRC", "value": 2, className:'rally'},
    {"content": "MotoGP", "id": "MotoGP", "value": 3, className:'motorcycle'},
  ]);

function showAllGroups(){
    groups.forEach(function(group){
      groups.update({id: group.id, visible: true});
    })
}

var items = new vis.DataSet([
])

var container = document.getElementById('visualization');
var options = {
    groupOrder: function (a, b) {
        return a.value - b.value;
    },
    groupOrderSwap: function (a, b, groups) {
        var v = a.value;
        a.value = b.value;
        b.value = v;
    },
    groupTemplate: function(group){
        var container = $('<div>').attr({style: 'position: relative;'});
        // var menuContainer = $('<div>').attr({class: 'btn-group'});
        var menuButton = $('<button>').attr({'data-toggle': 'dropdown'}).html('menu');
        container.append(menuButton);
        var menu = $('<ul>').attr({class: 'dropdown-menu'});
        var menuItem1 = $('<li>').attr({class: 'dropdown-item'}).html("Test 1");
        var menuItem2 = $('<li>').attr({class: 'dropdown-item'}).html("Test 2");
        var menuItem3 = $('<li>').attr({class: 'dropdown-item'}).html("Test 2");

        menu.append(menuItem1);
        menu.append(menuItem2);
        menu.append(menuItem3);
        container.append(menu);
        // container.append(menuContainer);

        var label = $('<span>');
        label.html(group.content);
        container.append(label);
        return container[0];
    },
    orientation: 'both',
    editable: true,
    groupEditable: true,
    start: new Date(2015, 6, 1),
    end: new Date(2015, 10, 1)
};

var timeline = new vis.Timeline(container);
timeline.setOptions(options);
timeline.setGroups(groups);
timeline.setItems(items);
Источник

0 ответов

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