Keeping panel heights consistent

Question

I have a loop which displays data in a bootstrap panel. The basic structure of the loop produces something like so

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <div class="panel panel-default clientPanel">
        <div class="panel-body">
          <h4>Name: John Doe</h4>
          <p>Email: something@something.com</p>
          <p>Type: Sandwich</p>
          <p>Group: Group 1</p>
        </div>
        <div class="panel-footer">
        </div>
      </div>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
      <div class="panel panel-default clientPanel">
        <div class="panel-body">
          <h4>Name: John Doe</h4>
          <p>Email: something@something.com</p>
          <p>Type: Sandwich</p>
          <p>Group: Group 1</p>
        </div>
        <div class="panel-footer">
        </div>
      </div>
    </div>
  </div>
</div>

The problem I am having is that some panels have more data than others, and therefore their height messes up the alignment of other panels.

I have set up a JSFiddle to demonstrate. Is there any way to make the heights consistent? I have tried to use a css table layout without success.

Any advice appreciated.

Thanks

score 2 · Answer 1 · answered Aug 13 '16 at 16:03

2

try to add this css and check

.panel-body {
  max-height: 18rem;
  overflow-y: auto;
  overflow-x: hidden;
}

answered Aug 13 '16 at 16:03

Mostafa Fateen

849
1
14
33

The problem with this is the addition of a scrollbar. If possible, I am trying to avoid this – katie hudson Aug 13 '16 at 16:05
1- you could set the panels to the height of the tallest – Mostafa Fateen Aug 13 '16 at 16:11
2- you could add something like "read more" and only show the data when it is clcked – Mostafa Fateen Aug 13 '16 at 16:12
Data is dynamic, I do not know what the tallest will be – katie hudson Aug 13 '16 at 16:12
you could also check this : http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll – Mostafa Fateen Aug 13 '16 at 16:13

score 1 · Accepted Answer · answered Aug 13 '16 at 16:54

Using jQuery you could try something like the following:

 var elementHeights = $('.clientPanel').map(function(){
   return $(this).height();
 }).get();

 var maxHeight = Math.max.apply(null, elementHeights);

 $('.clientPanel').height(maxHeight);

Look for all heights, determine the tallest, and the apply that height to all elements.

Keeping panel heights consistent

2 Answers2