Open dandanknight opened 4 years ago
I have the same issue.
How did you solve it? @dandanknight
It seems the component really doesn't like being in a flex layout.
Resizing the browser window causes CPU usage to spike then the component crashes (drag narrower, then wider again):
TypeError Cannot read property 'short' of undefined formatLabel https://f76cu.csb.app/node_modules/react-calendar-timeline/lib/lib/headers/DateHeader.js:218:33
Also, adding the containerResizeDetector to the timeline causes the component to hit a loop and crash as soon as it loads.
@dandanknight I don't know how to solve this issue or the cause of it tbh but I think when this PR #695 gets merged this might be fixed
This bug prevents this library from being used in any application that has flex containers.
If react-calendar-timeline is nested within any div that has a parent, grandparent etc that has display: flex
and flex-direction: row
, this header issue will occur.
Can we please get a release with PR above?
I had a similar issue and wrapping the Timeline component inside a div with overflow: scroll
solved the issue in my use case.
I don't know if it will solve all the issues related to wrapping the Timeline in a flex container.
Try it as a potential workaround.
Sandbox code here (just added one div from OP sandbox)
Describe the bug When the Timeline component is inside a
flex
, the header no longer follows the main timelineTo Reproduce
https://codesandbox.io/s/timeline-demo-sticky-header-f76cu?fontsize=14&hidenavigation=1&theme=dark
Add wrap the timeline component in a div with a
display : flex
Expected behavior To follow main timeline
Screenshots
Library Version 0.26.7
Desktop (please complete the following information): osx chrome