CODEWITHSUNDEEP
cssreactjs
Beginner
Beginner

Reputation: 9135

align a css timeline component for dynamic data rendering

I am trying to build a timeline component, so the timeline component has majorly 4 components.

  1. A cirlce
  2. A dotted line
  3. left side details
  4. right side details

so i am able to add these components, but how to align this so that can be use based on the dynamic data supplied. The text should be there in the left and right side of each circle.

codesandbox

sample design

Upvotes: 0

Views: 130

Answers (1)

GalAbra
GalAbra

Reputation: 5138

  1. I suggest you create your "TimelineEvent" components so they include both the data and the info regarding each event (and receive them as props, obviously).

  2. I'd use a table to keep the rows aligned vertically:

#wrapper {
  display: inline-block;
}

table {
  border-collapse: collapse;
}

.timeline-event {
  height: 100px;
}

.timeline-event:first-of-type .timeline-dash {
  top: 50%;
  height: 50%;
}

.timeline-event:last-of-type .timeline-dash {
  height: 50%;
}

.middle-cell {
  position: relative;
}

.circle-wrapper {
  position: relative;
  width: 20px;
}

.circle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: tomato;
  border-radius: 100%;
  z-index: 2;
}

.timeline-dash {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  border-right: 1px solid black;
  z-index: 1;
}
<div id="wrapper">
  <table>
    <tr class="timeline-event">
      <td class="data">
        Event Data<br/>
        Second Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>

    <tr class="timeline-event">
      <td class="data">
        Event Data<br/>
        Second Row<br/>
        Third Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>

    <tr class="timeline-event">
      <td class="data">
        Event Data<br/> Second Row<br/> Third Row
      </td>
      <td class="middle-cell">
        <div class="circle-wrapper">
          <div class="circle"></div>
        </div>
        <div class="timeline-dash"></div>
      </td>
      <td class="info">
        Event Info
      </td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions