CODEWITHSUNDEEP
javascriptcssangularjs
Ryan
Ryan

Reputation: 1395

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

What I'm trying to do

I'm trying to evenly space the li in a ul (justify). The CSS works when I hardcode the li, but when I use ng-repeat, the CSS is no longer applied.

HTML

<div ng-app="SampleApp">
    <div ng-controller="ListCtrl">
        <ul class="two-column">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <ul class="two-column">
            <li ng-repeat="item in items"></li>
        </ul>
    </div>
</div>

CSS

.two-column {
    text-align: justify;
}

.two-column:after {
    content: '';
    display: inline-block;
    width: 100%;   
}

The fiddle

http://jsfiddle.net/RyanWalters/M8228/

Expected result

Both lists should have space between each li.

Actual result

The list generated with ng-repeat has no space between each li.

Why is this happening?

Upvotes: 7

Views: 2556

Answers (2)

Mijail Dan Cohen
Mijail Dan Cohen

Reputation: 309

have you tried 

<ul class="two-column" ng-repeat="item in items">
            <li></li>
        </ul>

and float the li elements?

css:

.two-column {
    list-style: none;
    padding: 0;
}



.two-column li {
    background-color: #f00;
    border: 1px solid #000;
    display: inline-block;
    height: 50px;
    width: 100px;
    margin-left:10px;
margin-top:10px;
    float:left;
}

Upvotes: -1

Explosion Pills
Explosion Pills

Reputation: 191749

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/

Upvotes: 13

Related Questions