CODEWITHSUNDEEP
angularjstwitter-bootstrap
Mika
Mika

Reputation: 5845

ng-repeat bootstrap columns with the same hight

I am using ng-repeat to spawn multiple rows each with two sections. I do not know how many sections I have in total or how much content is in each section.

<div class="row">
  <div class="col-sm-6" ng-repeat="(key, values) in additionalDetails">
    <h3>{{key}}</h3>
    <ul>
      <li ng-repeat="(key, value) in values">{{value}}</li>
    </ul>
  </div>
</div>

I want all the sections on the same row to be the same height but obviously the content in the row above can throw the alignment off. I know I can use the below but I can't figure out how?

<div class="clearfix visible-sm-block"></div>

Upvotes: 1

Views: 932

Answers (1)

Alex Johnson
Alex Johnson

Reputation: 1574

I would recommend to use an Angular.js directive that watches the heights of all your columns, and ensures that they remain the same height. I've included a little directive written by officert for this purpose. Add the directive to each element that you want to be the same size, and your selected columns will be resized to match the tallest column:

Usage Example

<div class="question-list" equal-heights=".question" equal-heights-items="questions">
  <div class="question col-md-3" ng-repeat="question in questions">
     <h4>{{ question.question }}</h4>
     <p ng-bind-html="question.answer"></p>
  </div>
</div>

Directive:

angular.module('myApp').directive('equalHeights', [
  '$timeout',
  function($timeout) {
    return {
      restrict: 'A',
      scope: {
        equalHeightsItems: '='
      },
      link: function(scope, element, attrs) {

        var selector = attrs.equalHeights;

        scope.$watch('equalHeightsItems', function(newVal) {
          if (newVal && newVal.length) {
            $timeout(function() {
              equalize();
            });
          }
        });

        function equalize() {
          var height = 0;

          var $elements = element.find(selector);

          _.each($elements, function(el) {
            var $el = angular.element(el);
            var elHeight = $el.outerHeight();

            if (elHeight > height) height = elHeight;
          });

          $elements.height(height);
        }
      }
    };
  }
]);

Upvotes: 1

Related Questions