Can the remove button gap in vis-timelne be suppressed?

Question

In vis-timeline, if stacking is not enabled (default), there seems to be an enforced gap between two items on the same line, such that two items can never touch. It appears to me, that this gap is enforced to have always enough space for the remove button, which appears right to the item. However, this gap is always enforced, even if editable.remove is set to false in the options for vis.Timeline.

Is there a possibility to avoid having this gap, without having to enable stacking? (I do not want to have overlapping, except for a point in time.)

Here is an example (it's from the github page of vis-timeline, but simplified):

<!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 runs this snippet, you will see, that the two created items were moved to different lines.

If you try to move the to items to one line, you will discover, that this is only possible with a small gap between them. Notice, that this gap more or less as large as the remove button for the items. However disabling this button either by framework or by css doesn't change the behaviour.

@Robin Mackenzie I'll do. I just left it out, because it is very common. — Lord Bo, Jul 14 '22 at 11:04

score 2 · Accepted Answer · answered Jul 19 '22 at 16:17

You can adjust the horizontal item margin in vis-timeline using the margin.item.horizontal option described in the documentation at https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options. The default value is 10, setting it to 0 will allow the items to be placed side by side.

Example updated options object:

var options = {
  editable: true,
  margin : { 
    item: {
      horizontal:0
    }
  }
};

Example updated snippet:

<!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,
    margin : { 
      item: {
        horizontal:0
      }
    }
  };

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

Can the remove button gap in vis-timelne be suppressed?

1 Answers1