AngularJS seems to be ignoring CSS styles when displaying list items in the ng-repeat loop

After coming across a tutorial on creating round circles connected by a line in CSS, I decided to implement it myself. Interestingly, everything worked perfectly fine when I tested it with static HTML. However, when I tried to make it dynamic using Angular's ng-repeat feature, the circles ended up justified left instead of aligning properly. To better illustrate this issue, I created a jsFiddle which can be found here: https://jsfiddle.net/1ho1zz59/

<ul class="progress-rnd">
    <li ng-repeat="step in steps">
      {{step.name}}
    </li>
</ul>

This situation has led me to ponder two questions:

  1. What is causing this unexpected behavior?
  2. How can I go about fixing it?

Any insights or guidance would be greatly appreciated. Thank you!

javascripthtmlangularjscsstemplates

Answer №1

One issue arises when the text-align: justify; property behaves differently on HTML containing spaces as opposed to what Angular generates (where li tags are followed by commented-out HTML and the next tag). This custom directive should help resolve this, see this example:

var app = angular.module('testApp', []);
angular.module('testApp')
.directive('addASpaceBetween', [function () {
        'use strict';
        return function (scope, element) {
            element.after(' ');
        }
    }
]);

Add this directive to the repeat element like so: 

ng-repeat="step in steps" data-add-a-space-between

Answer №2

The issue at hand lies in the way HTML treats elements set to inline-block, resulting in unnecessary whitespace between them. One solution is to establish proper spacing between these elements using CSS instead of depending on HTML for this purpose.

For a demonstration of how to rectify this problem, you can visit http://example.com/css-solution

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

Programmatically setting properties for elements

I have a question about how to programmatically add a prop to a component in my React project. Here is the scenario: In the render() method, I have the following code snippet: <TextField name="password" va ...

javascriptreactjsmaterial-ui

VueJS is unable to access an array

Unable to access an array in Vue.js. console.log(this.ref_number_response[0]); When I try to access the array, it shows undefined. I'm puzzled by this... data(){ return{ ref_number_response: [], } }, methods:{ che ...

javascriptvue.js

AngularJS Global Variables: Harnessing the Power of Global Variables

Recently, I encountered an issue with initializing a variable in a controller's scope. The problem arose when the variable was altered by another controller upon user login. This particular variable plays a crucial role in managing aspects like the na ...

angularjsglobal-variables

What is the approach for utilizing Vue List Rendering with v-if to verify the presence of items within an array?

My current implementation utilizes v-if to conditionally display a list of cafes. However, I am interested in filtering the list based on whether a specific drink item is found in an array. For instance, I have a collection of cafes and I only want to dis ...

javascriptvue.jsvuejs2

Adding content between previous and next buttons with the use of JavaScript

After successfully implementing the functionality for the previous and next buttons in my script, I was requested to include the date between the buttons like this: btnPrev issueDate btnNext < Date > Although I tried adding the date between the PREV ...

javascripthtmljquerycss

Error: Trying to use 'setTimeout' before it has been initialized is not allowed

I'm currently working on a JavaScript exercise in my code. I encountered an issue where I am trying to assign a reference to the setTimeout function to ogTimeout on the second line since I plan to redefine setTimeout later. However, when I run the co ...

javascript

The challenge of navigating through $scope

In my Angular view/form, I have an input file element that is being utilized with ng-upload. The code snippet looks like this: <input id="img" type="file" name="image" onchange="angular.element(this).scope().setFile(this)"> <input id="imgname" ty ...

javascriptformsvalidationangularjs

Ways to transform a poster into a clickable link in an HTML video

I am currently working on embedding an mp3 audio file in a browser, along with an accompanying image and a URL for redirection upon clicking. To achieve this, I have placed the mp3 file within a video tag and designated the image as a poster using the foll ...

htmlhtml5-video

Looking for assistance with transferring a data attribute to a form redirection

I'm seeking assistance with a coding dilemma I've encountered. To provide some background, I have a list of items on my website, each featuring a 'Book Now' button that redirects users to different pages. Recently, I incorporated a mod ...

javascriptjqueryhtmlformsexpressionengine

Utilizing jQuery to target a select element's two specific children

I am trying to target the parent element by matching two specific children elements. Here is my code: $('span:contains("11:00am"), span.name:contains("Tom")').parents("a").css("background-color","rgb(255, 255, 255)"); <script src="https://c ...

javascriptjqueryhtmljquery-selectors

What is the equivalent of Node's Crypto.createHmac('sha256', buffer) in a web browser environment?

Seeking to achieve "feature parity" between Node's Crypto.createHmac( 'sha256', buffer) and CryptoJS.HmacSHA256(..., secret), how can this be accomplished? I have a piece of 3rd party code that functions as seen in the method node1. My goal ...

javascriptnode.jsbase64

Converting HTML to PDF: Transform your web content into

I have a couple of tasks that need to be completed: Firstly, I need to create a functionality where clicking a button will convert an HTML5 page into a .PDF file. Secondly, I am looking to generate another page with a table (Grid) containing data. The gr ...

javascriptcsshtmlpdf

Are there any factors within a local network or desktop environment that may impact the execution of JScript?

Something strange is happening with the JavaScript on my project. It works perfectly fine, except when accessed from computers at a specific company. Even more puzzling is that the JavaScript only fails about half of the time when accessed from that compan ...

javascriptajaxnetworkingdesktop

What is the best way to single out a specific item from a list to display in a component upon clicking in Vue.js?

To view the data of a specific item in the child component "comandasInd", I just need to click on the icon. <template> <v-data-table :items="comandas"> <template v-slot:items="props"> <td>{{ props.item.nombre }}</td& ...

javascriptfirebasevue.js

Require assistance verifying token - I'm having trouble interpreting the JSON response information

I am encountering an issue with reading the JSON response data following the submission of a Google OAuth2 token validation request as outlined in the documentation. Below is the Google OAuth2 token validation request: $http.get('https://www.googlea ...

angularjsgoogle-oauth

What is the best method to invoke a function recursively with a delay of 1 second following the completion of an ajax

I am facing a situation where I need to implement a delay of 1 second after an ajax request is completed, regardless of the outcome. Instead of calling a method every second, I specifically want to call a function 1 second after the ajax request finishes. ...

javascriptjqueryajax

Remove the innerHTML content of dynamically added elements using jQuery

After researching, it seems that event handlers are commonly added using methods such as .live(), .on(), .bind(), or .delegate(). My previous question may not have been clear, so I decided to delete it and ask a simpler one. Is there a way to clear the in ...

javascriptjqueryhtmlajax

React's connect method is causing issues with my test case

Attempting to create a test case for my jsx file... Took a sample test case from another jsx file... The other file does not have the connect method... But this new file contains the connect method... Believe this is causing issues with my test case... Any ...

javascriptjqueryangularjsreactjsmocha.js

Implementing asynchronous code when updating state using React hooks

Here's a scenario I'm dealing with: const [loading, setLoading] = useState(false); ... setLoading(true); doSomething(); // <--- at this point, loading remains false. Since setting state is asynchronous, what would be the best approach to ...

javascriptreactjscallbackreact-hooks

Adding a characteristic to every item in an array of objects

Currently, I am utilizing Node.js along with Mongoose to interact with a MongoDB database and retrieve an array of objects from a specific collection. However, my aim is to add an additional property to each of these retrieved objects. Below, you can see t ...

javascriptnode.jsarraysexpressobject