Initial inline styles prevent timeline from rendering properly when not initially visible.

So, here is my use case: I’m using react-router, and have several pages. On the first page, no timeline is being rendered. I switch to the second page where a timeline should be rendered, but it is not visible. I can inspect it, and see that the element is there, but it has an inline style on the .vis-timeline element which sets it to hidden.

I can change the visibility using css or in code, but then it’s only visible and you cannot scroll or use the timeline.

The solution I found was to get the timeline in my componentDidMount function, and then set the styles on .vis-timeline to an empty string. For example:

componentDidMount() {
    let timeline = document
      .getElementById("uniqueId")
      .getElementsByClassName('vis-timeline')[0];
    timeline.style = "";
  }

This was the only way I could get it to initialize correctly. This may be related to #38 as well.

[jwarykowski]

@daumann - Sorry for the delay on this. We’ve super busy the last few months and have dropped the ball on this one. We’ll try and have a quick look tomorrow! 👍

[willmcclellan]

Is there a really simple example someone can build to reproduce this, without having to pull in react-router?