CODEWITHSUNDEEP
javascriptvis.jsvis.js-timeline
Sofia Malmsten
Sofia Malmsten

Reputation: 87

How to implement a vertical scrollbar?

Does anyone know how to implement a vertical scrollbar for a vis.js timeline? I have read the visjs.org documentation, other threads here on stack overflow and on GitHub, but I still can't implement the scrollbar.

Should it be enough to write verticalScroll: true in the configuration for a vis.js timeline? This is what I have as configuration at the moment. Do I need to write it in some other way? Or do I need to implement the vertical scroll in a totally different way?

// Configuration for the Timeline
var options = {
    width: '100%',
    height: '100%',
    minHeight: '300px',
    padding: '0px',
    orientation: 'top',
    max: futureDate,
    min: pastDate,
    groupOrder: 'start',
    zoomMin: '86400000',
    margin: {item: {horizontal: 0, vertical: 5}, axis: 5},
    verticalScroll: true,
    zoomKey: 'ctrlKey'
};

Upvotes: 0

Views: 3076

Answers (2)

Jean Gorene
Jean Gorene

Reputation: 164

A priori the options taken are good, It would be enough to reduce the height of the timeline directly in the options rather than to use "minHeight" in this case. Normally, this should bring up the scroll bar.

To check this, reduce the timeline height to 150 px in the options (e.g) You can also generate a large number of groups so that they exceed the vertical left pannel capacity of timeline so that the vertical scrollbar displays.

UPDATED with minimal example adapted from "vis.js examples"

See also the timeline documentation on website for configuring options...

<html>
<head>
  <title>Timeline | Vertical Scroll Option</title>

    <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" />

</head>

<body>

<h1>Timeline vertical scroll option</h1>

<h2>With <code>
verticalScroll: true,
zoomKey: 'ctrlKey'</code>
</h2>

<div id="mytimeline1"></div>

<script>

  // create groups
  var numberOfGroups = 25;
  var groups = new vis.DataSet()
  for (var i = 0; i < numberOfGroups; i++) {
    groups.add({
      id: i,
      content: 'Truck&nbsp;' + i
    })
  }

  // create items
  var numberOfItems = 1000;
  var items = new vis.DataSet();

  var itemsPerGroup = Math.round(numberOfItems/numberOfGroups);

  for (var truck = 0; truck < numberOfGroups; truck++) {
    var date = new Date();
    for (var order = 0; order < itemsPerGroup; order++) {
      date.setHours(date.getHours() +  4 * (Math.random() < 0.2));
      var start = new Date(date);

      date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
      var end = new Date(date);

      var orderIndex = order + itemsPerGroup * truck
      items.add({
        id: orderIndex,
        group: truck,
        start: start,
        end: end,
        content: 'Order ' + orderIndex
      });
    }
  }

  // specify options
  var options = {
    stack: true,
    verticalScroll: true,
    zoomKey: 'ctrlKey',
    height: 200, // you can use also "300px"
    start: new Date(),
    end: new Date(1000*60*60*24 + (new Date()).valueOf()),
  };

  // create a Timeline
  var container1 = document.getElementById('mytimeline1');
  timeline1 = new vis.Timeline(container1, items, groups, options);

</script>

</body>
</html>

Upvotes: 3

user3311613
user3311613

Reputation: 147

It sounds like you can get a scrollbar using overflow-y: scroll. Also, height: 100% will most likely never cause this to kick in (unless this element is contained within another element that has a set height) as the element that you are editing will keep growing in height rather than staying a certain height and have a scrollbar. So I would recommend removing height: 100% and using max-height instead (if your element isn't contained within another element), so if the element content grows to something larger than your max-height, it will begin to scroll. If you're looking to style that scrollbar, that's a whole different story.

https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

Upvotes: 0

Related Questions