How to get equal height for all divs generated by ng-repeat

Question

I'm using this jquery plugin to make the divs height the same. For the plugin to work I have to add equalheight to the divs that I want to have equal height.It works when the divs are not generated by ng-repeat.

How to make all the divs that was generated by ng-repeat the same height?

html

<div class="col-md-4" ng-repeat="dept in mainCtrl.departments" ng-hide="filteredCareers.length == 0">
    <div class="job_list_box" ng-class="{'equalheight': filteredCareers.length > 0 }">
        <div class="job_list_icon">
            <img ng-src="{{dept.icon}}" alt="{{dept.name}}">
        </div>
        <h4 class="job_list-box-title">{{dept.name}}</h4>
        <ul class="job_list">
            <li ng-repeat="hiring in mainCtrl.careers | filter:dept.name as filteredCareers">
                <a href="#" data-toggle="modal" data-target="#job-modal-{{hiring.id}}">{{hiring.name}}</a>
            </li>
        </ul>
    </div>
</div>

controller

var app = angular.module('myApp', [])
app.controller('MainController', function ($scope, $http) {
    var self = this;
    $http({
        method: 'GET',
        url: 'json/departments-archives.json'
    }).then(function (response) {
        self.departments = response.data;
    }, function () { console.log('Error'); }); 
    $http({
        method: 'GET',
        url: 'json/careers-archives.json'
    }).then(function (response) {
        self.careers = response.data;

    }, function () { console.log('Error'); });
});

I tried using setTimeout then I added {{mainCtrl.setHeight}} on the div with the class job_list_box but it didn't work.

setTimeout(function(){
    self.setHeight = "equalheight"
},100)

I also tried other solutions that I found online like angular plugins angular-vertilize, the flexbox approach..etc but none of it worked.

https://stackoverflow.com/questions/35066544/ng-repeat-bootstrap-columns-with-the-same-hight — Parth Raval, Apr 10 '18 at 07:05

score 2 · Accepted Answer · answered Apr 10 '18 at 07:12

In the plugin you have linked to, the resize happens automatically when the library is loaded. This may be happening before your angular app has rendered the elements.

Although I could not find any explicit API, digging through the JS file, I found this initialisation code:

$('.equalheight').simpleequalheight({
    responsive: true
});

Some handy links which talk about initialising jQuery plugins for dynamically rendered elements in Angular: Link 1 Link 2

Perhaps running that after your angular app renders might help?

As an alternative, I would recommend using flexbox to handle this. Sample:

.col1 {
  background: red;
}

.col2 {
  background: yellow;
}

.col3 {
  background: pink;
}

.col {
  padding: 0.5rem;
}

.container {
  display: flex;
}

<div class="container">
  <div class="col col1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
  <div class="col col2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  <div class="col col3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

The 1st solution worked. Thanks! As I said in my question the flexbox approach did not work for me. — Len, Apr 10 '18 at 07:16

score 0 · Answer 2 · answered Apr 10 '18 at 07:08

Not sure if it require a plugin, seems it can be done using height & overflow property

div {
  height: 100px;
  overflow: auto;
  border: 1px solid green;
  margin-top: 30px;
}

<div>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
  content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions
  have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
</div>
<div>
  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is
</div>

score 0 · Answer 3 · answered Apr 10 '18 at 07:11

0

in css use max-height or flex box attributes.

answered Apr 10 '18 at 07:11

Akhil

443
1
9
29

How to get equal height for all divs generated by ng-repeat

3 Answers3