Center-aligned Circles via CSS with the number of circles controlled by AngularJS

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.

Answer №1

To center the content in the parent element of .circle, add text-align:center;.

.w3-container {text-align:center;}

Check out this code snippet for an example:

.parent {text-align:center;}
.child {height:14px; width:14px; background:royalblue; display:inline-block;}
<div class="parent">
  <span class="child"></span>
</div>

<div class="parent">
  <span class="child"></span>
  <span class="child"></span>
  <span class="child"></span>
</div>

<div class="parent">
  <span class="child"></span>
  <span class="child"></span>
  <span class="child"></span>
  <span class="child"></span>
  <span class="child"></span>
  <span class="child"></span>
</div>

Answer №2

If you want to make this layout using a flexbox, simply add the following CSS properties:

display:flex;
width:100%;
justify-content: space-around;

Here are some additional tips:

  1. Avoid using an id inside an ng-repeat as it will create multiple invalid ids.

  2. The use of barre can be omitted, and an after pseudo element can enhance the markup readability.

  3. The line (using after) is absolutely positioned in relation to the flexbox.

Check out the demo below:

.circle {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: RoyalBlue;
  display: inline-block;
}
.wrapper {
  display:flex;
  width:100%;
  justify-content: space-around;
  position:relative;
}
.wrapper:after {
  position:absolute;
  content:'';
  display:block;
  width: 100%;
  top:7px;
  height: 3px;
  background: RoyalBlue;
}
.advanced {
  width: 18px;
  height: 18px;
}
.circleActive {
  border-radius: 40%;
  width: 15px;
  height: 15px;
  background: RoyalBlue;
  display: inline-block;
}
<div class="w3-container">
  <div class="wrapper">     
    <div class="circle advanced" ></div>
    <div class="circle advanced circleActive" ></div>
    <div class="circle advanced" ></div>
 </div>
</div>

Answer №3

To easily center elements within a container, use the CSS property display: flex; and add justify-content: center;.

.row {
  display: flex;
  justify-content: center;
  margin: 50px;
  border-top: 2px solid blue;
}

.circle {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0 20px;
  background-color: blue;
  border-radius: 50%;
  transform: translateY(-50%);
}
<div class="row">
  <div class="circle"></div>
</div>

<div class="row">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

<div class="row">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Receiving messages in AngularJS with the help of Strophe.js

My XMPP client in AngularJS, inspired by this stackoverflow link. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d282e382f1d282e382f7331323e3c31">[email protected]</a> can send messages successfully, but <a hr ...

Is the JavaScript progress bar dysfunctional when used with object-oriented JavaScript code, but functions properly with arrow functions?

After posting a question about the JavaScript progress bar not working with object-oriented JavaScript code on Stack Overflow, I decided to try rewriting the script using arrow functions. Here is the new code: document.getElementById("barButton").addEve ...

Executing a function with a click, then undoing it with a second click

My goal is to trigger an animation that involves text sliding off the screen only when the burger icon is clicked, rather than loading immediately upon refreshing the page. The desired behavior includes activating the function on the initial click and then ...

AngularJS Google Chart: Customize pie chart tooltip to exclude percentage

My approach involves utilizing angularjs along with the angular-google-chart directive to create a PieChart. If you'd like to see a live example, check out my working demo on plunker. In the current setup, the A pie chart accurately represents the ...

What could be causing the post method to fail in this AngularJS example?

After successfully reading a JSON file in my sample code, I encountered an issue when trying to update the JSON file. The error message "Failed to load resource: the server responded with a status of 405 (Method Not Allowed)" appeared, even though the data ...

Unable to access filteredItems from custom popup in uib-typeahead retrieval process

Issue with Retrieving Filtered Items from ng-repeat in Controller using $scope Despite trying to fetch filtered items from ng-repeat, the value of $scope.filteredItems appears as undefined when I log it to the console. I attempted to implement the solutio ...

What is the best way to ensure the options/choices div reaches its ideal width?

Check out my StackBlitz project that I've set up In the styles.css file, you'll notice that I defined a fixed width of 650px for the option dropdown div, which is currently working fine @import '~bootstrap/dist/css/bootstrap.min.css'; ...

What is the best method for globally configuring the Angular moment timezone?

I integrated angular moment js into my angular application. I am looking to display the date and time based on the time zone of the user accessing the app. However, I am facing difficulty in applying the time zone globally throughout my application. https ...

AngularJS Scope 101: Understanding the relationship between parent and child scopes with models, both with and without the use of a 'dot'

Example WITHOUT 'period' http://jsfiddle.net/CmXaP/168/ <div ng-app="myapp"> <div ng-controller="parent"> Parent ctrl value: <input type="text" data-ng-model="name" /> <div ng-controller="child1"> ...

Mobile devices are having issues with CSS rendering

I've encountered an issue with my CSS code. It seems to be working fine until the @max-width:767 media query, but then it stops working on the resolution immediately below it, which is @425. However, it starts working again on resolutions below that. ...

What is the best way to activate a watch upon clicking a button?

Is there a way to use the $watch() method on a button in order to trigger it when the button is pressed? Here is an example of the HTML: <button style="margin-left:10px;" class="btn btn-danger btn-xs"> Re-init tableau ...

Guide to embedding content in the ui bootstrap modal directive

I have created a personalized directive based on the ui bootstrap modal directive to ensure consistency with the modal template throughout my application. My directive is functioning properly until I attempt to transpose its content into the template: ht ...

How can I implement user flow using AngularJS?

We're facing an issue with implementing UserFlow in our AngularJS app. Our product is built on older version of AngularJS (1.8) and although we find the concept of UserFlow appealing, we are running into a problem. The standard injection and initiali ...

Deleting a row from a table in Angular when a form is submitted

I am new to using Angular and I have been attempting to remove certain elements from a table upon submission. <tr ng-repeat="val in values "> <td ng-bind="$index"></td> <td ng-bind="val.rec">ED1500322</td> <td& ...

Showing a pop-up on a click of a dynamically created table row, showcasing information specific to that row

I am facing a challenge with my dynamically generated table that is based on the JSON response from an AJAX call. What I am trying to achieve is to display additional data in a modal when a table row is clicked. This would be simple if the data was hard co ...

Error in Chrome: Text container's height is not fully extended to 100%

I'm encountering an issue with achieving 100% height on a child container in Google Chrome, although it works perfectly fine on Firefox. Here is the URL: http://linco.com.py/beta/multiplaza/cartelera.php The styling for the main container is as fol ...

Customizing the appearance of a JavaScript countdown timer's output on an individual basis

I am currently working on customizing the appearance of a JavaScript date counter. My goal is to style the days, hours, minutes, and seconds individually. Ideally, I want each unit to be right-aligned within its own div, with specific left and top absolute ...

Is optgroup malfunctioning in IE 10?

My main question is: does optgroup not function properly in IE? The Plnkr code works fine in Chrome but encounters issues in IE 10. I'm trying to find a solution that will work across both browsers. Is this a known problem? In Chrome, I can expand/co ...

Implementing a watcher property in JavaScript to dynamically add a class to an element

I'm currently facing an issue where I need to apply a class to an element when a certain data property changes. My approach involves using a watcher to monitor the value change and adding a class through JavaScript, as demonstrated in the code snippet ...

Can you share the method for concatenating an object at a specific index within an Array using JavaScript?

Currently, I have an array arr = [object1, object2, object3]. After removing the second index, the array now looks like arr = [object1, object3], and I am looking to add back the removed object2 at its original position in the array so that it becomes a ...