Search code examples
javascripthtmlcssvis.js

Remove border/outline from vis-timeline

I have very simple timeline testing things on Vis-Timeline. Is there a way to get rid of the Outline of the timeline?

As you see in the code there is border in css but this is external border. I'm talking about outline of the graph.

<!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-20 11:10:01' },
                { id: 2, content: 'item 2', start: '2014-04-20 11:10:02' },
                { id: 3, content: 'item 2', start: '2014-04-20 11:11:02' },
                { id: 4, content: 'item 2', start: '2014-04-20 11:13:02' },
                { id: 5, content: 'item 2', start: '2014-04-20 11:14:02' },
                { id: 6, content: 'item 2', start: '2014-04-20 11:15:02' },

            ]);

            // Configuration for the Timeline
            var options = {};

            // Create a Timeline
            var timeline = new vis.Timeline(Container, items, options);
        </script>
    </body>
    <footer>
        <style>
            .vis-timeline {
                outline: none;
            }
        </style>
    </footer>

</html>

enter image description here

So I can remove:

#visualization {
    width: 600px;
    height: 400px;
    /* border: 1px solid lightgray; */
}

But this only removes the external border.

I tried using similar approach to a problem I had with vis.js: Vis-Network.js suppress border from showing up

.vis-timeline {
    outline: none;
}

But it doesn't do anything - maybe I'm using wrong class, but I tried different classes with no change.

Solution

  • You can see that the .vis-timeline element has a border:

    .vis-timeline {
  border: 1px solid #bfbfbf;
  ...

    So you can just set border: none !important; to this .vis-timeline element:

    .vis-timeline {
    border: none !important;
}
    <!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;
            }
        </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-20 11:10:01' },
                { id: 2, content: 'item 2', start: '2014-04-20 11:10:02' },
                { id: 3, content: 'item 2', start: '2014-04-20 11:11:02' },
                { id: 4, content: 'item 2', start: '2014-04-20 11:13:02' },
                { id: 5, content: 'item 2', start: '2014-04-20 11:14:02' },
                { id: 6, content: 'item 2', start: '2014-04-20 11:15:02' },

            ]);

            // Configuration for the Timeline
            var options = {};

            // Create a Timeline
            var timeline = new vis.Timeline(Container, items, options);
        </script>
    </body>
    <footer>
        <style>
            .vis-timeline {
                outline: none;
            }
        </style>
    </footer>

</html>