CODEWITHSUNDEEP
htmlcss
IcyRelic
IcyRelic

Reputation: 25

Progress bar seems to be offset

I'm trying to add lines on my progress bar to show milestones and I'm having a bit of trouble with getting it perfect. There always seems to be an offset and I cant figure out whats wrong with it. The progress bar below is set to 40% and the first milestone is at 40% but its so offset and if you look at the 100 its not even on the progress bar. I need a way to make this exact. Any suggestions?

.progress-checkpoint {
    float: left;
    position: absolute;
    background-color: red;
    width: 1px;
    height: 29px;
    margin-top: -5px;
    color: black;
    overflow: visible;
}
.progress-checkpoint>div {
    margin-left: -19px;
    margin-top: -19px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div style="padding:50px">
  
  
  <div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 40%"><div class="progress-checkpoint" style="left: 40%;">
    <div>40</div>
    </div><div class="progress-checkpoint" style="left: 53%;">
    <div>53</div>
    </div><div class="progress-checkpoint" style="left: 67%;">
    <div>67</div>
    </div><div class="progress-checkpoint" style="left: 88%;">
    <div>88</div>
    </div><div class="progress-checkpoint" style="left: 100%;">
    <div>100</div>
    </div>        </div>
</div>
  
  
  
  </div>

Upvotes: 0

Views: 1208

Answers (1)

Fabian S.
Fabian S.

Reputation: 2529

Your progressbar is properly aligned. The problem is the absolute positioning of your .progress-checkpoint elements. Youre missing position:relative on .progress so the absolute positioning does start from the correct point.

Add the following to your CSS to make it work

.progress {
  position:relative;
}

In addition you need to remove overflow:hidden from the .progress Element so your text marks are not cut off.

Upvotes: 6

Related Questions