Hi all,
In the attached image I have 3 panels in three different columns but all in the same row. When the text in one of the columns wraps around to the next line that panel becomes a different height than the others. I would like to have all of the panels be the same height even when one of them becomes taller than the others.
Thanks
Ed
Hello,
This is Definitely Possible. Please follow the Step below:
<div class="row common-height clearfix">
<div class="col-md-4">
<div class="panel panel-default" style="height: 100%;">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, esse, velit, eaque officiis mollitia.
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" style="height: 100%;">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, esse, velit, eaque officiis mollitia inventore ipsum minus quo itaque provident error adipisci quisquam ratione assumenda at illo doloribus beatae totam?
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default" style="height: 100%;">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, esse, velit, eaque officiis mollitia inventore ipsum minus quo itaque provident error adipisci quisquam ratione assumenda at illo doloribus beatae totam?
</div>
</div>
</div>
</div>commonHeight: function( element ){
var maxHeight = 0;
element.children('[class*=col-]').each(function() {
var elementChild = $(this).children();
elementChild.css({ 'height': '' });
if( elementChild.hasClass('max-height') ){
maxHeight = elementChild.outerHeight();
} else {
if (elementChild.outerHeight() > maxHeight)
maxHeight = elementChild.outerHeight();
}
elementChild.css({ 'height': '100%' });
});
element.children('[class*=col-]').each(function() {
$(this).height(maxHeight);
});
},This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard