Quantcast
Channel: Recent Questions - Stack Overflow
Viewing all articles
Browse latest Browse all 12111

React-vertical-timeline is not showing. The output HTML keeps the elements hidden with "is-hidden" class

$
0
0

I am trying to implement a vertical timeline on my project. But its not showing on the generated HTML code. When I tried to inspect it, I see that the classes are generated to be hidden with "is-hidden". I think it might be having issues with intersection observer.

timeline.js file

"use client";import React from "react";import SectionHeading from "./section-heading";import {  VerticalTimeline,  VerticalTimelineElement,} from "react-vertical-timeline-component";import "react-vertical-timeline-component/style.min.css";import { timelineData } from "@/lib/data";import { useSectionInView } from "@/lib/hooks";export default function Experience() {  const { ref } = useSectionInView("Timeline");  return (<section      id="timeline"      ref={ref}      className="scroll-mt-28 mb-28 sm:mb-40 text-center"><SectionHeading>Timeline</SectionHeading><VerticalTimeline lineColor="">        {timelineData.map((item, index) => (<React.Fragment key={index}><VerticalTimelineElement              contentStyle={{                background: "rgba(255, 0, 255, 0.05)",                boxShadow: "none",                border: "1px solid rgba(0, 230, 0, 0.05)",                textAlign: "left",                padding: "1.3rem 2rem",              }}              contentArrowStyle={{                borderRight: "0.4rem solid rgba(255, 255, 255, 0.5)",              }}              date={item.date}              icon={item.icon}              iconStyle={{                background: "rgba(255, 255, 255, 0.15)",                fontSize: "1.5rem",              }}><h3 className="font-semibold capitalize">{item.title}</h3><p className="font-normal !mt-0">{item.location}</p><p className="!mt-1 !font-normal text-gray-700 dark:text-white/75">                {item.description}</p></VerticalTimelineElement></React.Fragment>        ))}</VerticalTimeline></section>  );}

data.js file

  {    index_number: 1,    title: "Bachelor's Degree",    location: "Bangladesh",    description:"I completed my Bachelor's Degree in Computer Science and Software Engineering at the American International University-Bangladesh.",    tags: ["CSSE", "Bachelors", "Graduation"],    date: "2-September-1994",    icon: <BiSolidGraduation />,  },  {    index_number: 1,    title: "Bachelor's Degree",    location: "Bangladesh",    description:"I completed my Bachelor's Degree in Computer Science and Softwarelre asjdajs.",    tags: ["CSSE", "Bachelors", "Graduation"],    date: "11-September-2021",    icon: <BiSolidGraduation />,  },```

Viewing all articles
Browse latest Browse all 12111

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>