Set equal height to all inner-element

 In QuickFIX

We face this problem multiple times while developing a site. If we are working with a premium theme or creating a custom theme from scratch. Very few themes like ‘Jupiter’ gives option of ‘Equal Column’ in back-end.

Consider a scenario when you are dealing with a structute where you have to create multiple blocks within a single block and assume those inner blocks or children blocks are having content in different length. It will make jumbled-up inner blocks within the parent block and will not look good. We can solve the issue by fixing its height through css but we will need to make changes there again and again when we change data within the inner blocks.

To avoid this problem we need to find a solution which is adoptive in a way. So when you make changes, it should adopt the change in height an should apply appropriate height to all the inner-blocks to make it look good.

Micah Godbolt has found a beautiful solution for this. He has craeted a js ‘Equal Height Divs’ which will get the height of the tallest block and will apply the same height to rest of the inner-blocks. The name of the js makes you feel that it will work with ‘DIV’ only but that is not the case. You can apply the same thins on DL-DD-DT, UL-LI, article etc tags.

Here is the code of Micah to set equal height to all inner-blocks;


equalheight = function(container){
var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function() {
$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;
if (currentRowStart != topPostion) {
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}
$(window).load(function() {
equalheight('.main article.equal-height');
});
$(window).resize(function(){
equalheight('.main article.equal-height');
});

We need to add a common class to all children block or inner-blocks to add equalheight() function. And we are calling this function on load and re-size event of window so the inner-blocks will gain same height on changing orientation or re-sizing window.

Recent Posts

Leave a Comment