The vis.js timeline sets a margin of 5px in each row using inline styles that are controlled programmatically by the library. The height, top position, and transform of each item within the row are specified by the library as well.
Attempting to manually set these values (e.g., item.style = 'top: 0') will not work, as vis.js immediately overrides them.
Is there a way to adjust or change this margin?
The margin feature outlined in the vis-timeline options list on this page allows for customization of margins.
To illustrate, the following snippet adjusts horizontal and vertical item margins to 0 pixels, while setting the axis margin to 5 pixels for a closer alignment with the time axis:
var options = {
margin : {
item: {horizontal:0, vertical:0},
axis: 5
}
};
CSS modifications can later be applied to alter the height of items:
.vis-box {
height: 20px;
}
.vis-range {
height: 20px;
}
Below is a comprehensive example showcasing these adjustments for a compact layout:
// Specify the DOM element where the Timeline will be displayed
var container = document.getElementById("visualization");
// Establish a DataSet to facilitate data-binding
var items = new vis.DataSet([
{ id: 1, content: "item 1", start: "2021-12-20" },
{ id: 2, content: "item 2", start: "2021-12-14" },
{ id: 3, content: "item 3", start: "2021-12-18" },
{ id: 4, content: "item 4", start: "2021-12-16", end: "2021-12-19" },
{ id: 5, content: "item 5", start: "2021-12-25" },
{ id: 6, content: "item 6", start: "2021-12-27", type: "point" },
]);
// Define configuration settings for the Timeline
var options = {
margin : {
item: {horizontal:0, vertical:0},
axis: 5
}
};
// Create the Timeline
var timeline = new vis.Timeline(container, items, options);body,
html {
font-family: sans-serif;
}
.vis-box {
height: 20px;
}
.vis-range {
height: 20px;
}
.vis-item {
font-size: 12px;
}<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<div id="visualization"></div>Have you experimented with using !important? For instance, try adding top: 0 !important;
Implementing this will guarantee that the specified property remains unchanged.
When working on my web app, I faced an issue with a fixed div modal that takes up the entire screen. The problem is that the scrollbar for this modal is not visible, only the body scrollbar can be seen. It seems like the fixed div's scrollbar is posit ...
Although there are similar questions on this topic already, they do not address the specific issue of using values from the model as arguments for the controller. Make DIV containing AJAX ActionLink clickable Div as Ajax.ActionLink Take a look at the fo ...
I've set up a dialog to open on button click, and it's functioning correctly. My goal is to have the dialog open from the bottom with a height of 300px, show the contents inside it, and then hide when I click outside or inside any element. Here ...
After watching a YouTube tutorial on creating desktop notifications, I had an idea to use it as a reminder tool. For example, having a specific reminder appear as a desktop notification every 30 minutes when triggered by clicking a button. However, the cod ...
My goal is to implement a mat-grid-list of images with a dynamic number of columns based on the screen size. Everything works perfectly except for one small glitch – when the grid first loads, it defaults to 3 columns regardless of the screen size until ...
After browsing numerous forums and attempting various solutions, I encountered a new challenge each time. My goal is to generate a Google line chart using data from a MYSQL table and encoding it in JSON. Then, I aim to utilize an HTML file to showcase the ...
Just dipping my toes into the world of three.js...my cube is displaying in black even though I set the color to red. Any ideas why? <!DOCTYPE html> <html> <head> <title>Experimenting with shapes</title> & ...
Is it possible to store the selected option from a dropdown list as a JavaScript variable, even when new Ajax content is loaded on the page? Below is a simple form code example: <form name="searchLocations" method="POST"> <select name="l ...
I have incorporated this code pen in my website to create a menu button for mobile view: http://codepen.io/anon/pen/LNNaYp Unfortunately, the button sometimes breaks when clicked repeatedly, causing the 'X' state to appear even when the menu is ...
I've been working on changing the background colour of the toggle button to green when it's turned on. I feel like I've followed all the correct steps, but for some reason, the background just stays grey. Can anyone point out what might be ...
Scenario: I am facing a situation where my event handler is already receiving one parameter (an error object). However, I now need to pass an additional parameter when binding the event handler. I am aware of the bind() method, but I am concerned that it ...
I need to search for specific text on a webpage and receive an alert if the text is found. <script type='text/javascript'> window.onload = function() { if ((document.documentElement.textContent || document.documentElement.innerText ...
I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...
I need help creating a flexible content area using only HTML/CSS. The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size. I have two items that need to be positioned next ...
Currently, I am delving into web programming and have created a Python API that queries an SQL database to return a JSON. The functionality of the API is as expected. In parallel, I've developed a controller where I execute a GET request to utilize t ...
While practicing Angular, I encountered an error during compilation: Module not found: Error: Can't resolve './app.component.css' in 'D:\hello-world-app\src\app' i ｢wdm｣: Failed to compile. This is my app.compo ...
I have created an endpoint that retrieves all product information in JSON format. I am attempting to display this data on my index.html page using Axios, but I am encountering difficulties with getting the data correctly. This is my first time working with ...
As a newcomer to programming, I am eager to develop an app that utilizes the numerical values inputted by customers as variables for calculations. How can I extract the value from an input using JavaScript? For instance, how can I subtract one input value ...
Hey there! I have a messaging app with arrays of messages. [{"id":4, "user_id":1, "messageable_id":3, "messageable_type":"conversation", "text":"Text 1", "action":null, "target_id":null, "created_at":"2019-06-17 15:47:55", "updated_at":"2019-06-17 15:47:5 ...
I'm attempting to create a LineString with arrows at the end of each line to indicate the direction of the route. I found an example on the official site: The example code in the link creates arrows through user drawing, but I need arrows for a give ...