0
<div class="list-group">
  <p class="list-group-item-text">(one line)</p>
  <p class="list-group-item-text">(one line)</p>
  <p class="list-group-item-text">(two lines)</p>
</div>

I want all .list-group-item-text to have the same height, which is that of the largest one.

So from the code above, the first two items would expand to the size of the third one.

I tried this solution but it's not responsive.

Edit: Here is the solution, courtesy of karan3112

Community
  • 1
  • 1
onepiece
  • 3,279
  • 8
  • 44
  • 63

1 Answers1

1

Use the below code to loop through each item and use a temp variable to get the maximum value.

Wrap the item's inner content in a div, in this case .list-group-item-wrapper

EDIT : used outerHeight()

JS

    var temp = 0;
    $('.list-group .list-group-item-wrapper').each(function (index) {
      if($(this).outerHeight() > temp)
      {
        temp = $(this).outerHeight();
      }          
     });
    $('.list-group .list-group-item-wrapper').css('min-height',temp);

DEMO

karan3112
  • 1,867
  • 14
  • 20
  • Although the smaller list items did expand, they were still smaller than the biggest list item. – onepiece Aug 08 '14 at 07:03
  • Give a fiddle link of your code so I can understand better. – karan3112 Aug 08 '14 at 07:05
  • This is because of the padding given to the `.list-group-item-text`. Try wrapping the `a` tag in a div and use the div in the above logic to calculate the max height. – karan3112 Aug 08 '14 at 07:09
  • This is a good solution. However, when the window is extremely shrinked, the height differs again. – onepiece Aug 08 '14 at 07:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58935/discussion-between-karan3112-and-onepiece). – karan3112 Aug 08 '14 at 07:39