VerticalTimeLineColor change issue

[Binz95]

I changed the color of line between each vertical element.... The color is black..... I face an issue while loading the timeline It shows a black line before loading the timeline events... What should I do for hide this blank black line before loading my timeline data..

[stephane-monnot]

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

[stephane-monnot]

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

I will look it now.

[stephane-monnot]

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

[Binz95]

. 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

[Binz95]

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

[stephane-monnot]

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

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

[Binz95]

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

[stephane-monnot]

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;
  }
}

[Binz95]

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

[Binz95]

It's working now

[stephane-monnot]

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

[stephane-monnot]

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.

[Binz95]

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

[Binz95]

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

[stephane-monnot]

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

[Binz95]

I got it thanku

[farrukh007]

I m using map() in React vertical timeline but no component is showing in the browser except the line ☹️

[farrukh007]

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.

I try to use the same map but no component is showing in the browser except the line. Plz guide. thanks