Equal height only row with javascript without tables

Question

so i'm having this problem where i can't seem to figure out how i should make lis height equal to the highest one ONLY in that row. I got it to work, however it makes ALL lis height the same as the highest one. Here's the code i have so far: https://codepen.io/benasl/pen/ooLrON?editors=1010

var max = -1;
var list = document.getElementsByTagName('li');

Array.prototype.forEach.call(list, function(child) {
  max = max > child.style.height ? max : child.offsetHeight;  
  console.log(child.offsetHeight);
});
Array.prototype.forEach.call(list, function(child) {
  child.style.height = max + 'px'; 
});

ul {
  list-style: none;
  padding: 0;
  width: 100%;
}

li {
  padding: 5px 10px;
  display:block;
  position:relative;
  height: 100%;
}

p {
  width: 100%;
}

<div class="row">
  <div class="col-sm-4">
    <ul>
      <li><p>testt tte sttest testtesttesttes ttesttes ttesttesttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul> 
  </div>

  <div class="col-sm-4">
    <ul>
      <li><p>testtesttestt esttesttesttes ttesttesttestte sttesttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul> 
  </div>
  
  <div class="col-sm-4">
    <ul>
      <li><p>testtest testtes ttesttes ttesttesttestt esttestte assaas sasaas saassa sasasasaassa sttest</p></li>
      <li><p>test</p></li>
      <li><p>test aaaaaaaa aaaaaaaaa a aaaa aaaaaaaa</p></li>
      <li><p>test</p></li>
    </ul> 
  </div>
  
</div>

Does it have to be a JS solution? Can it be CSS only? It's making them the same height because you're not grouping the li by row. You have one big bucket that all the li below to so it's going to find the tallest one and make them all that size. — hungerstar
– hungerstar, Commented Nov 6, 2017 at 21:47
What do mean by "only in that row"? You only have one row in your example. And the other issue is the selector which will select all li's in the document. Have you tried using the row class as selector and iterate through the li's. — dama
– dama, Commented Nov 6, 2017 at 22:01
@dama , there's 3 ul within, he wants to retrieve the height of the tallest li from these uls and apply the highest value to each li. So every li have the same height. — G-Cyrillus
– G-Cyrillus, Commented Nov 6, 2017 at 22:43
@dama there are 3 uls, that all have 4 lis inside them, so when all three uls are in the same line, the lis in all the rows looks like they're in 4 seperate rows. What i want to do is to, if one li in said 'row' have bigger height, make all the lis in that 'row' higher — Benas Lengvinas
– Benas Lengvinas, Commented Nov 7, 2017 at 5:40

score 0 · Accepted Answer · 2017-11-07 04:01:32Z

0

Change

max = max > child.style.height ? max : child.offsetHeight;

to

max = max > child.offsetHeight ? max : child.offsetHeight;

child.style.height is set-only, you cannot read it. You can get the height with window.getComputedStyle().

For example:

var el = document.getElementById("myList");
var height = window.getComputedStyle(el, null).getPropertyValue("height");

offsetHeight gives you the height with padding and border. (how to change the offsetHeight of a element using javascript?)

JSFiddle (Click on run to see the result)

edited Nov 7, 2017 at 4:01

answered Nov 7, 2017 at 3:36

user3589620

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Equal height only row with javascript without tables

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related