stephane-monnot / react-vertical-timeline

Vertical timeline for React.js
https://stephane-monnot.github.io/react-vertical-timeline/
MIT License
1.06k stars 158 forks source link

How to force an element to left or to right while using 2-columns layout #151

Closed KapadiaNaitik closed 1 year ago

KapadiaNaitik commented 1 year ago

As the title suggests I want to know if there is any way to force an element to a particular side .

aspil commented 1 year ago

I'm aware that this is a rather hacky solution, but I recently found out that by putting an empty div before a VerticalTimelineElement you can change the alternation of all the VerticalTimelineElement elements below that div. In order to apply this effect for just one element, simply add another empty div after it. See the example:

<VerticalTimelineElement className="left-element1"> // assume this is placed left
    // stuff
</VerticalTimelineElement>

<div/> // this changes the VerticalTimelineElement alternation

<VerticalTimelineElement className="right-element1"> // it will be placed left instead of right
    // stuff
</VerticalTimelineElement >

<div/> // this breaks the effect and restores the original alternation

<VerticalTimelineElement className="left-element2"> // this will be placed normally on the left side
     // stuff
</VerticalTimelineElement>

I hope that helps!