Here is what the layout looks like:
https://i.sstatic.net/Cz0CT.png
Here is what I would like to have:
https://i.sstatic.net/WbkY2.png
Or if the getNumber function returns more, for example:
https://i.sstatic.net/ViBXh.png (so essentially the circles are always aligned center regardless of the return value of getNumber)
Below is the AngularJS code:
<div class="w3-container">
<span ng-repeat="i in getNumber(data.numberOfState) track by $index" style="margin-right:10%;">
<div id="advanced" class="circle"></div>
</span>
<div id="barre"></div>
</div>
Below is the CSS code:
.circle {
border-radius: 50%;
width: 18px;
height: 18px;
background: RoyalBlue;
display: inline-block;
}
#barre{
width: 100%;
height: 3px;
background: RoyalBlue;
margin-top: -17px;
}
#advanced {
width: 18px;
height: 18px;
/* TODO */
}
.circleActive {
border-radius: 40%;
width: 15px;
height: 15px;
background: RoyalBlue;
display: inline-block;
}
How can I align the circles in the center of the bar?
right: 50%;
left: 50%;
position: absolute;
While this solution works, due to the iteration in my JavaScript, all circles are positioned at the same coordinates, resulting in only one being visible.