Angularjs ng-repeat creating inconsistent spacing between list elements

Question

I've encountered a problem with ng-repeat because I'm not getting constistent spacing between list elements. For example, I've declared the following css...

.test-grid {}

.test-grid ul {
    list-style: none;    
}

.test-grid li {
    display: inline-block;
    position: relative;
    background: red;    
}

...using display: inline-block so I can create a list that spans one line. Now I write the following html...

<div class="test-grid">
  <ul>
     <li>{{ctrl.items[0]}}</li>
     <li>{{ctrl.items[1]}}</li> 
     <li>{{ctrl.items[2]}}</li>            
  </ul>
</div>

Which produces the output shown in 1, where there is a gap between 'tom', 'jerry' and 'pluto'...

If I use ng-repeat now, like so...

<div class="test-grid">
    <ul>
        <li ng-repeat="$item in ctrl.items">
            {{$item}}
        </li>
    </ul>
</div>

Then I get the output shown in 2 where there is now no space between 'tom', 'jerry' and 'pluto'. If I should move the ng-repeat to the <ul> element, like so...

<div class="test-grid">
    <ul ng-repeat="$item in ctrl.items">
        <li>
            {{$item}}
        </li>
    </ul>
</div>

Then I get the output shown in 3 above, where the list items are on separate lines and for some reason the css formatting has been lost. I dont' know why but I think the reason for the gap in 1 is because there is whitespace between the list elements, for example... <li>item<\li> <li> instead of <li>item<\li><li>. And I'm guessing this has been removed by ng-repeat.

Which is the correct way to use the ng-repeat here? And is there a fix that will produce consistent spacing whether ng-repeat is used or not? Ideally I'd prefer no spacing between list elements.

Note, I'm writing a library of html widgets and I don't know if the user will write the html using ng-repeat or without but I need the result to be the same either way. Here's the jsfiddle of the code.

Thanks!

score 2 · Accepted Answer · answered Nov 03 '15 at 10:41

Version 1 and 2 are both correct. As you said, the spacing results from the formatting in your html combined with "display: inline-block". If you put all three li-items on one line, you won't have the spacing anymore.

Version 3 is not correct, because instead of creating a list with 3 elements, it creates 3 lists with 1 element each.

To achieve consistent results between version 1 and 2, you could use the following css:

.test-grid {
}

.test-grid ul {
    list-style: none;
    clear: both;
}

.test-grid li {
    display: block;
    float: left;
    position: relative;
    background: red;    
}

Hope that helps!

Thanks, that helps a lot! So instead of `inline block` we can set the `li` to be a block element, then `float: left` to place the next `li` element on the same line with no space. I get that `clear: both` in the `ul` stops elements being placed either side of the list, but do you know why this is needed here? It looks like you're setting the `li` elements to float and not the `ul` but that's not the case? — CSharp, Nov 03 '15 at 11:00

Angularjs ng-repeat creating inconsistent spacing between list elements

1 Answers1