Georgi Antonov Georgi Antonov - 1 year ago 60
CSS Question

Can't equalize anchor heights using jQuery

Seems like my JavaScript is not listening to me. I simply want to set all anchors' height to be equal to the highest height of these anchors.


<div class="col-md-4 col-sm-6 col-xs-12 product-items" ng-repeat="products in products">
<div class="product">
<img ng-href="" ng-src="{{products.thumbimg}}" alt="{{products.imgalt}}">
<a href="#">{{}}</a>
<p>{{products.price | currency : ""}} BGN</p>
<p>Free Shiping</p>


(function () {
var app = angular.module("app", []);
var MainController = function ($scope, $http, $filter) {
/* Jquery */
var maxHeight = 0;
$("div .product a").each(function () {
if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }

$("div .product a").height(maxHeight);

app.controller("MainController", MainController);
} ());

What about setting equal height on h1,h2 or h3 html elements

Answer Source

<a> elements are inline elements, and you can't change the height of an inline element using height in CSS. You have to change them to inline-block elements by adding this CSS code to your page:

a {
  display: inline-block;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download