CODEWITHSUNDEEP
csstwitter-bootstrap
onepiece
onepiece

Reputation: 3539

Getting all list-group-items to be the same size

<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

Upvotes: 0

Views: 2571

Answers (1)

karan3112
karan3112

Reputation: 1867

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

Upvotes: 1

Related Questions