CODEWITHSUNDEEP
jquerycssjquery-mobile
Vivek
Vivek

Reputation: 11028

How can I ensure that two divs always have the same height?

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?

Upvotes: 0

Views: 1016

Answers (6)

GoGoGarrett
GoGoGarrett

Reputation: 623

$(document).ready(function({
    var x = $('#primary').height();
    $('#sidebar').css('height', x);
});

Hope this helps.

Upvotes: 0

Sanooj
Sanooj

Reputation: 2637

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
    thisHeight = $(this).height();
    if(thisHeight > tallest) {
    tallest = thisHeight;
    }
    });

    group.height(tallest);

    }
    $(document).ready(function() {
    equalHeight($(".ui-grid-m"));
    });

Or use css3 

.datablock
{ display:table;
}
.ui-grid-m
{  display:table-cell;
}

Upvotes: 1

user369661
user369661

Reputation:

Two column grids

<div class="ui-grid-a">
    <div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
    <div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
</div>

Just look in jQuery Mobile

Upvotes: 0

run
run

Reputation: 1186

 if($blockM.height() < $blockN.height())
{               
    $blockM.height($blockN.height());             
}else if($blockM.height() > $blockN.height())
{  
   $blockN.height($blockM.height()); 
}

try this

Upvotes: 0

Marc Uberstein
Marc Uberstein

Reputation: 12541

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.

Upvotes: 1

Nanne
Nanne

Reputation: 64419

We use a jquery plugin (I guess) called 'equalheights' For this. There seem to be several out there, but they all seem to do the same job. (I'v not picked this one in our project, so I don't know exactly which it is we use, but they seem somewhat equal)

Take a look at this plugin or this plugin, I think they do what you want.

Upvotes: 1

Related Questions