If I render a timeline behind a Bootstrap tab that is not visible, the timeline is created with an attribute of height="0".
For example, consider a page with two tabs named A and B. B will contain the timeline and is asynchronously loaded. That is, when the page is loaded, A is visible by default and users can click B to see the timeline. If the user clicks B before the data is loaded, they see a "loading" message.
The bug is: If the timeline renders before the user clicks B, the svg will have a height of 0 (it is not visible).
Note that if the user clicks B while the timeline is loading, things work as expected.
I think that the height calculation is somehow dependent on whether the timeline is visible or not. I've worked around the issue by setting the height explicitly.
If I render a timeline behind a Bootstrap tab that is not visible, the timeline is created with an attribute of
height="0".For example, consider a page with two tabs named A and B. B will contain the timeline and is asynchronously loaded. That is, when the page is loaded, A is visible by default and users can click B to see the timeline. If the user clicks B before the data is loaded, they see a "loading" message.
The bug is: If the timeline renders before the user clicks B, the svg will have a height of 0 (it is not visible).
Note that if the user clicks B while the timeline is loading, things work as expected.
I think that the height calculation is somehow dependent on whether the timeline is visible or not. I've worked around the issue by setting the height explicitly.