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

Question

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:

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

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

javascript html angularjs css templates

Answer 1

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

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 3

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

Answer 4

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

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

Answer №1

Answer №2

Similar questions

What are the steps to ensure that the content within the <pre><code></code></pre> tags displays correctly in Internet Explorer 7?

My goal is to populate all of these elements with Javascript

Use two fingers to scroll up and down on the screen

Illuminate a corresponding regular expression within a text input

The ngRoute feature seems to be malfunctioning and unable to switch views when an <a> tag is clicked

Javascript's associative arrays: a versatile tool for data organization

Extract the text and value from an asp.net treeview by utilizing jQuery or JavaScript

Responsive Text and Alignment in the Latest Bootstrap 5

Mapping an object in a table only results in the final value being displayed

Hide the element, update its content, and smoothly transition back

Refresh two angular-datatables

What are the best techniques for creating animations in AngularJS?

Tips for arranging headers next to each other on a restaurant menu

Is it a shallow copy or something else when updating state in React JS?

New to AppleScript: Encountered an unexpected identifier instead of the expected end of line

Use the Google Maps API to dynamically add a marker via AJAX once the map has been initialized

Creating enduring designs in Next.js

Updating items within an array in a MongoDB collection

Dynamically loading AngularJs controllers with the help of ui-router and requireJs is a

Is there no "on" function available in the Node readline module?