CODEWITHSUNDEEP
angularjshtmlcss
Oam Psy
Oam Psy

Reputation: 8663

List items not correctly aligning with an ng-repeat

I have a simple ng-repeat <li>. Each <li> consumes 33.33% of the width so 3 items per row.

However, for some reason the items in the second row do not line up. After a big of digging, if i apply a min-width of say, 400px, then it works. But, i can not do this as the description text length is dynamic.

HTML:

<ul class="grid-wrap">
  <li class="grid-col one-third" ng-repeat="job in Jobs" ng-init="descriptionLimit = 20">
    <div>{{ job.JobTitle }}</div>
    <div>{{ job.Location }}</div>
    <div>{{ job.JobDescription | limitTo:descriptionLimit }} 
      <span ng-click="descriptionLimit = job.JobDescription.length"> >> </span></div>
  </li>
</ul>

CSS:

ul, ol {


list-style: none;
    padding: 0;
    margin: 0;
}

.grid-wrap {    
    margin-left: -3em; /* the same as your gutter */
    overflow: hidden;
    clear: both;
}

.grid-col {
    float: left;
    padding-left: 3em; /* this is your gutter between columns */
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.one-third {
    width: 33.33%;
}

plunker: http://plnkr.co/edit/oWXrqoJpaYPDbe4TwT3c?p=preview

If you click on the >> the description will expand and you can see each <li> does not line up:

enter image description here

Upvotes: 2

Views: 489

Answers (1)

jmustonen
jmustonen

Reputation: 470

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)}">

Upvotes: 1

Related Questions