Option to show the scroll bar at the right side of the timeline

[victor-carv]

When using verticalScroll: true it shows the scroll bar at the left side of the timeline.

I would like to request a feature to show the scroll bar on the right side:

Or is it already possible?

[yotamberk]

Not an easy task. I was requested to do this in the past and failed to deliver. I can try again. I can see what I can do.

[victor-carv]

Thanks @yotamberk For now, I'm dynamically changing the vis-right height based on the vis-left height, and using some css to hide the scrollbar at the left side. It's working, but it's not so easy to achieve.

  let contentHeight = $('.vis-panel.vis-left > .vis-content').height();
  $('.vis-right>.vis-content').css('height', contentHeight);

and

  .vis-panel.vis-right {
    border: 0;
    width: auto;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .vis-panel.vis-left {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */

    &::-webkit-scrollbar { /* WebKit */
      display: none;
      width: 0;
      height: 0;
    }
  }

[Async0x42]

Thanks @yotamberk For now, I'm dynamically changing the vis-right height based on the vis-left height, and using some css to hide the scrollbar at the left side. It's working, but it's not so easy to achieve.

  let contentHeight = $('.vis-panel.vis-left > .vis-content').height();
  $('.vis-right>.vis-content').css('height', contentHeight);

and

  .vis-panel.vis-right {
    border: 0;
    width: auto;
    overflow-x: hidden;
    overflow-y: scroll;
  }
  .vis-panel.vis-left {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */

    &::-webkit-scrollbar { /* WebKit */
      display: none;
      width: 0;
      height: 0;
    }
  }

After I did this, there's a gap where the scrollbar was removed.

Were you able to get rid of the blank gap between the left panel and right?

[victor-carv]

After I did this, there's a gap where the scrollbar was removed.

Were you able to get rid of the blank gap between the left panel and right?

Yes @Async0x42, I ran into the same issue. After initializing the timeline I needed to run this function to remove the blank gap:

  ...
  //options 
 timelineOptions['onInitialDrawComplete'] = () => {
    updateScrollMargin();
  ...

   timeline = new vis.Timeline(timelineContainer, itemsView, groupsView, timelineOptions);

  ...

  const updateScrollMargin = (removeMargins = false) => {
    let left = $('.vis-panel.vis-left');
    let center = $('.vis-panel.vis-center');
    let vertical = $('.vis-panel.vis-vertical');
    let top = $('.vis-panel.vis-top');
    let right = $('.vis-panel.vis-right');
    let scrollMargin = center.offset().left - (left.offset().left + left.width());

    let elementsToUpdate = [center, vertical, top, right];

    if (removeMargins) {
      elementsToUpdate.forEach((el) => el.css('margin-left', 0));
      return;
    }

    if (scrollMargin >= 1) {
      elementsToUpdate.forEach((el) => el.css('margin-left', '-' + scrollMargin + 'px'))
    }
  };

[Async0x42]

After I did this, there's a gap where the scrollbar was removed. Were you able to get rid of the blank gap between the left panel and right?

Yes @Async0x42, I ran into the same issue. After initializing the timeline I needed to run this function to remove the blank gap:

  ...
  //options 
 timelineOptions['onInitialDrawComplete'] = () => {
    updateScrollMargin();
  ...

   timeline = new vis.Timeline(timelineContainer, itemsView, groupsView, timelineOptions);

  ...

  const updateScrollMargin = (removeMargins = false) => {
    let left = $('.vis-panel.vis-left');
    let center = $('.vis-panel.vis-center');
    let vertical = $('.vis-panel.vis-vertical');
    let top = $('.vis-panel.vis-top');
    let right = $('.vis-panel.vis-right');
    let scrollMargin = center.offset().left - (left.offset().left + left.width());

    let elementsToUpdate = [center, vertical, top, right];

    if (removeMargins) {
      elementsToUpdate.forEach((el) => el.css('margin-left', 0));
      return;
    }

    if (scrollMargin >= 1) {
      elementsToUpdate.forEach((el) => el.css('margin-left', '-' + scrollMargin + 'px'))
    }
  };

This is working wonderfully. I had to call updateScrollMargin on each timeline 'changed' event to get it to work, since not all groups were expanded on load.

The only issue is that the mouseWheel vertically scrolls in extremely small increments after this change, did that also affect you? (and do you have a fix offhand?). If not, I'll dig into it to resolve the issue so we can post a comprehensive method of changing the scrollbar to the right.

[victor-carv]

This is working wonderfully. I had to call updateScrollMargin on each timeline 'changed' event to get it to work, since not all groups were expanded on load.

The only issue is that the mouseWheel vertically scrolls in extremely small increments after this change, did that also affect you? (and do you have a fix offhand?). If not, I'll dig into it to resolve the issue so we can post a comprehensive method of changing the scrollbar to the right.

@Async0x42 The changed function is triggered a lot of times. In my case, I'm listing to a $(window).on('resize.timeline' ... event, so when you expand or collapse a group the.timeline height will change and then I call the updateScrollMargin function.

[Azbesciak]

Hello, was that anyhow addressed? I see there is left and leftContainer, also right and rightContainer in dom object, but do not see anything in the API to change the position.

[vladguan]

I just tried the above suggestion and it does not work. I also tested it on some of the sandbox examples with the same result.

[Niehaus]

I did it in vanilla js in case anyone wondering how to do it since the versions above uses jquery (and some typescript too)

const updateScrollMargin = (removeMargins = false) => {
	let left = document.querySelector('.vis-panel.vis-left');
	let center = document.querySelector('.vis-panel.vis-center');
	let vertical = document.querySelector('.vis-panel.vis-vertical');
	let top = document.querySelector('.vis-panel.vis-top');
	let right = document.querySelector('.vis-panel.vis-right');

	const centerLeftOffset =  center.getBoundingClientRect().left
	const leftLeftOffset = left.getBoundingClientRect().left
	const leftWidth = left.getBoundingClientRect().width

	let scrollMargin = centerLeftOffset - (leftLeftOffset + leftWidth);

	let elementsToUpdate = [center, vertical, top, right];

	if (removeMargins) {
		elementsToUpdate.forEach((el) => (el as HTMLElement).style.marginLeft = '0');
		return;
	}

	if (scrollMargin >= 1) {
		elementsToUpdate.forEach((el) => (el as HTMLElement).style.marginLeft = -scrollMargin + 'px');
	}
}