Horizontal Timeline - Labels Overlapping

0
votes

I am building a horizontal timeline using absolutely positioned divs.

However I am having an issue where the labels for each div overlap when the dates are too close together. You can see this in the following Plunker (label one and label two overlap)

https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview

I need to put in some sort of margin, however I am not sure how to do this given the width's will be created dynamically (based on a certain date value)

Any advice would be great!

HTML

<div class='timeline' style='width:100%;position:relative'>

      <div class='one timeline-milestone'>
        <div class='timeline-label'>
          Label One
        </div>
      </div>

      <div class='two timeline-milestone'>
        <div class='timeline-label'>
          Label Two
        </div>
      </div>

      <div class='three timeline-milestone'>
        <div class='timeline-label'>
          Label Three
        </div>
      </div>

      <div class='four timeline-milestone'>
        <div class='timeline-label'>
          Label Four
        </div>
      </div>
</div>

CSS

.timeline-milestone {
  height:10px;
  margin-bottom:20px;
  width:10%;
  text-align:right;
  position:absolute;
}

.one {
width:10%;  
}

.two {
width:15%;
}

.three {
width:50%;
}

.four {
  width:90%;
}

Plunker

https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview

3
htmlcsstimeline

3 Answers

1
votes

Add the following css: 

.timeline{
  display: table;
}

.timeline-milestone {
  display: table-cell;
  height:10px;
  width: auto;
  text-align:right;
}

Converting it to a table will ensure that they never overlap. The display:table and table-cell will handle dynamic widths automatically.

Updated plunker

0
votes

you gave 100% in main block and total subblock shoul be below or equal to 100% , if it exceeds it will happen , try this code.. 

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>

     <div  >
      <table style='width:100%;position:relative'>
        <tr>
          <td style='width:25%;position:relative'>
            <div>
        <div>
          Label One
        </div>
      </div>

          </td>
          <td style='width:25%;position:relative'>
             <div>
        <div>
          Label Two
        </div>
      </div>
          </td>
          <td style='width:25%;position:relative'>
            <div >
        <div >
          Label Three
        </div>
      </div>
          </td>
          <td style='width:25%;position:relative'>
            <div >
        <div >
          Label Four
        </div>
      </div>
          </td>
        </tr>

      </table>
0
votes

You can just alter your css and put this and it will never overlay

/* Styles go here */



.timeline-milestone {
 height:10px;
 margin-bottom:20px;
 width:10%;
 text-align:right;
 position:absolute;
}

.one {
margin-left: 0%;
}

.two {
margin-left: 33.5%;
}

.three {
margin-left: 66.5%;
}

.four {
margin-left: 100%;
}