React-calendar-timeline: Styling issue at first load

[rmncavaco]

Hello,
I'm testing the basic example and when i first load the page it gets like this:

After navigate to another page and navigate back to the page where the timeline is, it gets fixed by itself.

Thanks,

[Ilaiwi]

This is very weird!
what was your environment?

[rmncavaco]

I'm using with Ant Design UI on top of a React + Redux .net core template

[Ilaiwi]

what os and browser are you using?

[mcMickJuice]

@rmncavaco before we proceed, can you please provide a a repo or a codesandbox that you can share here that displays this bug? This issue could be an issue with the library or an issue with your code but it's impossible to know without actual code that we can play with.

This is why this project has issue templates (which you should have filled out) configured so that you as the issue creator can provide all pertinent information to us, the maintainers, so that we can address your issue as quick as possible.

[rmncavaco]

Windows 10 + Chrome Version 68

[rmncavaco]

@mcMickJuice i will create a codesandbox asap and let you know.

[rmncavaco]

I've made some code cleaning and apparently it went away....
Sorry about bothering you guys and thank you for you time.

[rmncavaco]

Ok, i was able to reproduce it again in codesandbox https://codesandbox.io/s/wj9r8wy18
Try the following:
Load the page and click on the timeline menu
Click anywhere in the code and hit the "space" bar.

Looks like that any update to the code when the timeline is been rendered causes the CSS to get messed up.

[Ilaiwi]

works fine for me

[rmncavaco]

I'm even able to reproduce it on Firefox

[rmncavaco]

[Ilaiwi]

ok I was able to reproduce now. It is a bug of how we calculate the width of the calendar headers part. Will look into it.

[mertcanyalhi]

Hi, is there a workaround for this issue?

[mertcanyalhi]

I've resolved this issue by dispatching a resize event while rendering:
window.dispatchEvent(new Event('resize'));

[Ilaiwi]

@mertcanyalhi we have efforts to get Custom Headers into master soon. It will solve this issue once and for all.

[TiagoGraf89]

I'm having an issue which i think its also related to the calculation of the header width.

In the initial state the sidebar header is not property aligned,
after a page resize (or window.dispatchEvent(new Event('resize')); like @mertcanyalhi mentioned) it seems to get resolved.

Also, if I shrink the page to a point where the vertical scroll bar is displayed the header seems to get a wrong size again.

[Ilaiwi]

@TiagoGraf89 this will be solved as well with Custom headers which is getting closer and closer to the end line.
could you please provide a codesandbox issue for future testing?

[diw1]

I've resolved this issue by dispatching a resize event while rendering:
window.dispatchEvent(new Event('resize'));

Thanks for the temp solution!

[Ilaiwi]

released in 0.25.0