Question

I am using jquery-mobile framework. I have two divs side by side (as columns), I am trying to keep their height same irrespective of how much data they contain.

This the html:

  <ul class="datablock" id="Manufacturing_and_Qualification_Information" style="display: none;">    
 <div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
     <div data-theme="d" id="paramBlk" class="ui-block-m"><li>Blah Blah Blah Blah Blah</li></div> 
     <div data-theme="d" id="valueBlk" class="ui-block-n"><li>Blah</li></div>
</div>  
<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
    <div class="ui-block-m" id="leftBtmRnd"><li>Blah Blah Blah Blah Blah</li></div> 
    <div class="ui-block-n" id="rightBtmRnd"><li>Blah</li></div>
</div>
</ul>

This is the jQuery code, which I tried so for, but it’s not working as expected:

var $blockM = $(".datablock").find('.ui-block-m');  
    var $blockN = $(".datablock").find('.ui-block-n');                  
     if($blockM.height() < $blockN.height()){       
        $blockM.css('height',$blockN.height());        
    }else if($blockM.height() > $blockN.height()){   

        $blockN.css('height',$blockM.height());       
    }

How can I achieve this?

Answer 1

Working link : http://jsfiddle.net/bMMpz/1/

Here is the code:

var biggestHeight = 0;
var $blockM;
var $blockN;

$(function() {
    $blockM = $(".datablock").find('.ui-block-m');
    $blockN = $(".datablock").find('.ui-block-n');

    getBiggestHeight();

    $blockN.height(biggestHeight);
    $blockM.height(biggestHeight);
});



function getBiggestHeight() {
    $blockM.each(function(i, e) {
        if ($(e).height() > biggestHeight) biggestHeight = $(e).height()
    });
    $blockN.each(function(i, e) {
        if ($(e).height() > biggestHeight) biggestHeight = $(e).height()
    });
}

I look for the biggest div and then select both selector and set height.