0

When doing some research, I found that I have the exact same problem as here: Bootstrap columns not aligning correctly.

Except I cant use the same solution because the columns are being added with a ng-repeat loop and I cant predict their height or how many there will be.

And they are not stacking properly when one is a bit taller than the others, what would you recommend doing about this?

Relevant code (The controller just populates the products array):

<div class="col-sm-2 text-center" ng-repeat="product in products">
      <img class="img-responsive img-center" src="{{product.image}}" alt="">
      <h4>
          <a href="#/list/{{product.product_id}}">{{product.name}}</a>
      </h3>
      <p>Price: {{product.price}}€</p>
</div>

Thank you!

Community
  • 1
  • 1
CyborgFish
  • 356
  • 6
  • 13
  • Putting your code should be better than refer another question code – michelem Jun 21 '15 at 22:35
  • That said, can't you do some sort of result pagination? So you can output the code like the answer you referred, if you have a ng-repeat you know how many items you have. – michelem Jun 21 '15 at 22:39
  • @Michelem I guess I could but there has to be an easier better html / css solution. Relevant code added, the discrepancy in the item's height is due to the images, each has a different size and proportions. – CyborgFish Jun 21 '15 at 22:47

1 Answers1

0

You could use a jQuery plugin like Masonry or Isotope which will make the images fit together regardless of height.. or you can try CSS 3 column-width like this example: http://www.codeply.com/go/Ndk9jqofgR

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624