IcyRelic IcyRelic - 3 months ago 63
CSS Question

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><div class="progress-checkpoint" style="left: 53%;">
</div><div class="progress-checkpoint" style="left: 67%;">
</div><div class="progress-checkpoint" style="left: 88%;">
</div><div class="progress-checkpoint" style="left: 100%;">
</div> </div>



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 {

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