VerticalTimeLineColor change issue about react-vertical-timeline HOT 16 CLOSED

It's not possible.

But with a little hack, you can :)

For 1 column type :

Hide the line :

.vertical-timeline::before {
    background: transparent;
}

And create line for each items :

.vertical-timeline-element:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 18px;
    height: calc(100%);
    width: 4px;
    background: white;
}

And for two columns :

@media only screen and (min-width: 1170px)
  .vertical-timeline.vertical-timeline--two-columns .vertical-timeline-element:not(:last-child)::before {
    left: 50%;
    top: 60px;
    margin-left: -2px;
  }
}

from react-vertical-timeline.

You can hide the line by default and show on scroll. Maybe you can use visibilitySensorProps prop to show the line.

from react-vertical-timeline.

Sorry, I'm in Japan, I was sleeping :D .

I will look it now.

from react-vertical-timeline.

If you have no event, you can add a condition and skip the render of VerticalTimeline :

{events.length > 0 &&
    <VerticalTimeline>....</VerticalTimeline>        
}

from react-vertical-timeline.

Thank you so much dear stephene
It's working now 😍

from react-vertical-timeline.

Could you reupload please, I can't see uploaded image.

from react-vertical-timeline.

I can't reproduce your issue. Could you provide an example ?

from react-vertical-timeline.

. verticalTimeLineColor ::before {
background :black! important;
}
I give this style for the line in timeline display
I need to show it when only the webpart events load
No need to display the line default

from react-vertical-timeline.

If there are no events in timeline then also this black line is appearing in my webpart...
No need to show this black line while loading

from react-vertical-timeline.

From top I removed
But I can't remove from bottom

from react-vertical-timeline.

It's working now

from react-vertical-timeline.

I don't understand why you create a verticaltimeline for each element. You should add your .map inside the VerticalTimeline element and inside the map, create a VerticalTimelineElement.

from react-vertical-timeline.

At first I give as u mentioned but that time I didn't get that black line between vertical elements

from react-vertical-timeline.

At first I add .map inside the VerticalTimeline element and inside the map, created a VerticalTimelineElement. But I can't get that black line between each events.... So I change my code like this.... Please help me to find a solution for this problem

from react-vertical-timeline.

Could you share your code if you project is not condidential ? It's 4 am here, I will go to sleep :)

from react-vertical-timeline.

I got it thanku

from react-vertical-timeline.