search

namespace-ee / react-calendar-timeline

A modern and responsive react timeline component.
MIT License
1.93k stars 630 forks source link

Inside flex container causes header to stick #707

Open dandanknight opened 4 years ago

dandanknight commented 4 years ago

Describe the bug When the Timeline component is inside a flex, the header no longer follows the main timeline

To 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 Untitled

Library Version 0.26.7

Desktop (please complete the following information): osx chrome

FridgeWalaby commented 4 years ago

I have the same issue.

How did you solve it? @dandanknight

gorbs commented 4 years ago

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.

Ilaiwi commented 4 years ago

@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

rawbeans commented 4 years ago

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?

Adrien-P commented 3 years ago

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)