JavaScript: Max Height: NaN-CodePudding

In collection pages of our Shopify site, the VIEW DETAILS buttons in every product card are misaligned because of variable lengths of product title. In order to align them we decided to set min-height of product titles of all product cards in a row to the highest of the three in the same row using pure JavaScript. Below is the complete logic to achieve this.

Logic:

Find ALL selectors of ".card__info"
Set number of cards per row, to check based on window.innerWidth
Set max height = 0;
Foreach card__info selector, execute the following:
- Get the card__title
- Get the height.
- Set max height = max (max_height, new height)
Foreach card__info selector, execute the following:
- Get the card__title
- Set the min-height to the max value.

Ideal - do it row-wise window.innerWidth 768px and above - 3 columns else 2 columns

The code below is just the first part of the solution. The output I get in the console is Max Height: NaN instead of the actual height because there are 15 of the products with their titles in the collection page linked below.

JavaScript Code:

//  Find All selectors of ".card__info"
let allCardInfo = document.querySelectorAll(".card__info");
//  Set number of cards per row, to check based on window.innerWidth
var numCardsPerRow = ((window.innerWidth >= 768) ? 3 : 2);
var maxHeight = 0; //  Set max height = 0;
//  Foreach card__info selector, execute the following:
allCardInfo.forEach(element => {
  let cardTitle = element.querySelector(".card__title");   // Get the card__title
  let cardTitleHeight = cardTitle.height;   // Get the height.
  // Set max height = max (max_height, new height)
  maxHeight = Math.max(maxHeight, cardTitleHeight);
  console.log('Max Height: '   maxHeight);
});

CodePudding user response：

.height is not a property of html elements in JS so you can use

getComputedStyle(element)[0].height instead of that,

getComputedStyle is a good method of window object that helps you to get ALL styles of an element(no matter they are inline, internal or external)

I also tested what @James said in comments about

let cardTitleHeight = cardTitle.clientHeight;

it works too...

you Also can use element.getClientRects to get height of your element