The white line not showing on the first render in NextJS 13

stephane-monnot / react-vertical-timeline

Vertical timeline for React.js

https://stephane-monnot.github.io/react-vertical-timeline/

MIT License

1.09k stars 161 forks source link

The white line not showing on the first render in NextJS 13 #160

Open BeldimanAR opened 1 year ago

BeldimanAR commented 1 year ago

When i scroll down to the component in which the vertical timeline is, it shows the cards but the line is invisible, only on the second render (when i edit my file for example) the line appears. Anyone had this issue before? I have the same code in React.js and works, is it a problem with nextjs?

captaincrackerjack commented 1 year ago

I have the opposite issue, the line appears upon first render, but after reloading the page, disappears from view. Not sure how to fix either.

alexnguyennz commented 1 year ago

Had a similar issue where the line didn't appear until about a second later. Previously I had the default animate on so this was hiding the issue.

I added the default timeline styles (style.min.css) into my main CSS and just set the background colour for the line:

.vertical-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: white; /* var(--line-color) */
}

The timeline component is also lazy loaded in my project. Working perfectly for me after this in Next.js 13 & app router.

farrukh007 commented 1 year ago

Having alignemnt issues. I am unable to resize content box. How to align and set width of the content box?