Georgi Antonov Georgi Antonov - 3 months ago 7
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.

HTML



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


JS



(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

<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;
}
Comments