En vis-timeline, si el apilamiento no está habilitado (predeterminado), parece haber una brecha forzada entre dos elementos en la misma línea, de modo que dos elementos nunca pueden tocarse. Me parece que esta brecha se aplica para tener siempre suficiente espacio para el botón Eliminar, que aparece justo al lado del artículo. Sin embargo, esta brecha siempre se aplica, incluso si editable.remove se establece en false en las opciones de vis.Timeline .
¿Existe la posibilidad de evitar tener esta brecha, sin tener que habilitar el apilamiento? (No quiero tener superposición, excepto por un punto en el tiempo).
Aquí hay un ejemplo (es de la página de github de vis-timeline, pero simplificado):
<!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>Si ejecuta este fragmento, verá que los dos elementos creados se movieron a líneas diferentes.
Si intenta mover los elementos a una línea, descubrirá que esto solo es posible con un pequeño espacio entre ellos. Tenga en cuenta que este espacio es más o menos tan grande como el botón de eliminación de los elementos. Sin embargo, deshabilitar este botón ya sea por marco o por css no cambia el comportamiento.
Puede ajustar el margen horizontal del elemento en vis-timeline usando la opción margin.item.horizontal descrita en la documentación en https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options . El valor predeterminado es 10, establecerlo en 0 permitirá que los elementos se coloquen uno al lado del otro.
Ejemplo de objeto de opciones actualizadas:
var options = { editable: true, margin : { item: { horizontal:0 } } };Ejemplo de fragmento actualizado:
<!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>