When using vis-timeline without stacking enabled (which is the default setting), there appears to be a predefined gap between two items on the same line, preventing them from touching. It seems that this enforced gap is to accommodate the remove button that appears next to each item. However, even if editable.remove is set to false in the options for vis.Timeline, this gap still persists.
Is there a way to eliminate this gap without enabling stacking? (I want to avoid overlapping, except at a specific point in time.)
Below is an example (simplified version from the GitHub page of vis-timeline):
<!doctype html>
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#visualization {
width: 600px;
height: 400px;
border: 1px solid lightgray;
}
</style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-14T00:00:00', end: '2014-04-14T00:15:00'},
{id: 2, content: 'item 2', start: '2014-04-14T00:15:00', end: '2014-04-14T00:30:00'},
]);
// Configuration for the Timeline
var options = {editable: true};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>If you run this snippet, you'll notice that the two items created are placed on separate lines.
Trying to move these items onto the same line reveals that only a small gap between them is possible. This gap appears to be approximately the size of the remove button for the items. Disabling this button through framework or CSS does not alter this behavior.