Even Row Heights for Columns With Bootstrap and AngularJS

When using AngularJS to iterate over and display a collection with Bootstrap columns you might notice that the columns don’t stack nicely unless they all have the same content height. If the content heights differ, then you’ll have some of them nested in strange places.

You can use ngStyle to clear the columns as if you were declaring separate rows for them. In the following example, you’ll notice that we are using the ngStyle directive to to clear the column at the index that we want. For this example I want 4 columns to a row. To do this, I’m clearing on the 4th index (the fifth column).

In the next example, I want 3 columns max to a row with a total of 7 columns. To do this, I’m clearing on the 3rd and 6th indexes (the fourth and seventh columns).

One thing you’ll notice is that I’m hard coding the indexes. I’m doing this because based on my data I know how many columns I’ll have. If you don’t know how many columns you’ll have then you might need to do something a little bit more creative to get them to size properly. One way of doing this is using JavaScript’s modulus operator (%).

With this example we always want the row to be created on the 4th column. This means that we will get 3 columns per row. Using this method we no longer need to know exactly how many columns will be present in our collection.

There are a couple of other possible solutions to this problem. Some of them include using the new CSS flexbox property. Others include organizing your data into chunks so that you can insert Bootstrap rows into the markup whenever you reach a new chunk. Here are a couple of links you might find helpful:

Leave a Reply

Your email address will not be published. Required fields are marked *