1

I have two rows of nested panels inside of a primary panel. The 1st row has 3 panels of unequal heights. How do I make the 3 panels to be the same height of the highest panel (panel #3 in the jsfiddle link)?

Here's the jsfiddle - http://jsfiddle.net/niner911/MgcDU/8905/

I would like panel #1 and panel #2 the same height of panel #3, or whichever the tallest panel would be.

Thanks for the help.

Here's my markup:

<div class="container">
<div class="panel panel-primary">
    <div class="panel-heading">outer</div>
    <div class="row">
        <div class="col-xs-4">
            <div class="panel panel-info">
                <div class="panel-heading">1</div>
                <div class="panel-body">
                    <div class="list-group">
                        <div class="list-group-item">111</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="panel panel-info">
                <div class="panel-heading">2</div>
                <div class="panel-body">
                    <div class="list-group">
                        <div class="list-group-item">222</div>
                        <div class="list-group-item">222</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="panel panel-info">
                <div class="panel-heading">3</div>
                <div class="panel-body">
                    <div class="list-group">
                        <div class="list-group-item">333</div>
                        <div class="list-group-item">333</div>
                        <div class="list-group-item">333</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <span>lower</span>
                </div>
                <div class="panel-body">
                      xyz
                </div>
            </div>
        </div>
    </div>
</div>

Niner
  • 2,074
  • 6
  • 37
  • 47

3 Answers3

3

Try using map() to process each item and get the size of the tallest panel. Than apply this height to each panel.

JS

var heightTallest = Math.max.apply(null, $(".panel-info").map(function ()
{
return $(this).outerHeight();
}).get());
$('.panel-info').css({ height: heightTallest + 'px' });
Fven
  • 547
  • 3
  • 5
3

Updated jsfiddle: http://jsfiddle.net/MgcDU/8915/

using jquery apply height to children of .row

$('.row').each(function(){
 var RowHeight = $(this).innerHeight();
 $(this).children().css({ height: RowHeight + 'px' });  
});

and set .panel height to what size you desire, eg. 100%

Damian Trzepała
  • 236
  • 3
  • 7
0

If you're okay with the browser compatibility limitations, you could try this CSS flexbox-based experimental code: https://github.com/twbs/bootstrap/pull/11851

cvrebert
  • 9,075
  • 2
  • 38
  • 49