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?

Answers:

Answer

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/

Answer

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;
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.