Angular: Why Doesn't CSS Justification Work with Ng-Repeat

Angular: Why doesn't CSS justification work with ng-repeat?

The whitespace between the li elements (necessary for the justification) is not emitted with Angular's repetition. You also have to wrap the whitespace so it gets repeated. You can do something like:

<span ng-repeat-start="item in items"></span>
    <li></li>
<span ng-repeat-end></span>

http://jsfiddle.net/M8228/1/

HTML CSS justify trick does not work in combination with angularJS

Take a look at this fiddle, I think is what you need: http://jsfiddle.net/2AaWf/10/

I included also a live AngularJS example. The idea is to use a wrapper element (a span), and to put the link and a whitespace inside it.

<span data-ng-repeat="tag in tags" href="#"><a href="#">{{tag.name}}</a> </span>

Angular ng-repeat to PDF or printer CSS presumed alignment issue

The issue is caused by css-border. You can use @media print and play around with the border thickness.

I had similar problem when generating a bar code. The bottom border always overlapped on bar code itself when printing from chrome or Firefox but it always worked in IE, not sure why it just worked in IE. You can also try IE and see if that works for you.

List items not correctly aligning with an ng-repeat

Might something like this be what you are looking for?

.one-third:nth-of-type(3n+1) {
  clear: both;
}

I.e. if you want to have exactly a maximum of 3 lis per row, and you want to always align your rows vertically, you'll need to explicitly do so.

Edit: And of course you could do this also with Angular, for example like this, first define a clearing class:

.clear-li {
  clear:both
}

and then apply it with ng-class:

      <li class="grid-col one-third" ng-repeat="job in Jobs" ng-init="descriptionLimit = 20" ng-class="{'clear-li': ($index % 3 === 0)}">

Applying CSS style conditionally in ng-repeat in AngularJS

You would do this using the ng-class directive. You'll simply add your styling as a class in your stylesheet and change your angular code to this:

<tr ng-repeat="data in userList" 
    ng-class="{ 'my-css-class': data.appDate>=delivery.joinedDate }">
    <td>{{$index+1}}</td>
    <td>{{data.name }}</td>
    <td>{{data.age}}</td>
    <td>{{data.dept}}</td>
    <td>{{data.appDate }}</td>
    <td>{{data.joinedDate}}</td>                         
</tr>

Stylesheet:

.my-css-class {
    background-color: #ffd6d6;
    border: dashed 3px #9e0b0f;
}

---

Related Topics