CODEWITHSUNDEEP
angularjscssangularjs-ng-repeat
Abhishek Jain
Abhishek Jain

Reputation: 2977

Angularjs - Unexpected space after last ng-repeat li

I am having a very strange layout issue with list-items generated using ng-repeat.

Plunker here

If you look at the view, you will see that the li in green (not generated using ng-repeat) goes to the next line because of the unexpected space. Also, if you change the width of li to 33%, you will see that the last li (Add User) is not aligned correctly.

I can work around this with some css tricks, but I want to understand why this is happening and if there is any way to avoid this. Has anyone encountered this before and figured out why this is happening?

Adding code below only because plunker link needs to be accompanied with some code

.users * {
  box-sizing: border-box;
}
.users ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.users ul li {
  width: 49%;
  margin: 5px 1% 0 0;
  padding: 0;
  display: inline-block;
}
.users ul li.user {
  background: yellow;
}
.users ul li.add-user {
  background: lightgreen;
}

Upvotes: 1

Views: 347

Answers (1)

ylerjen
ylerjen

Reputation: 4249

It's because you have a blank space (created by the carriage return) beetween the closing </li> and the <li class="add-user">

Write your html like this and the last li will be displayed correctly :

  ...
  <li class="user" data-ng-repeat="user in vm.users track by $index">
    <div>{{ user.name }}</div>
  </li><li class="add-user">
    <div>
      <a>Add Child</a>
    </div>
  </li>
 ...

Upvotes: 1

Related Questions