The Important Bit!

Easy way to get all .spanx divs aligned with row-fluid

April 9th, 2013

I was recently trying to find a nice solution to make sure all my span6 boxes were the same height as each other.

I found this solution, which worked on ALL of them:

boxes = $('.span6');		
maxHeight = Math.max.apply(
  Math, boxes.map(function() {
    return $(this).height();
}).get());
boxes.height(maxHeight);

This would make ALL of the .span6 boxes the same height… but that wasn’t quite what I wanted! The below example does what I needed:

$(document).ready( function() { 
		
		$('.row-fluid').each( function() {
				var this_height = $(this).height();
				$(this).children(".span6").each( function() {
					$(this).height(this_height);
				});
		});
	});

It assumes a setup of:

<div class="row-fluid">
    <div class="span6">some contents</div>
    <div class="span6">some other contents</div>
</div> 

<div class="row-fluid">
    <div class="span6">some contents</div>
    <div class="span6">some other contents</div>
</div> 

<div class="row-fluid">
    <div class="span6">some contents</div>
    <div class="span6">some other contents</div>
</div>

etc

You can do it using other sized boxes, such as:

<div class="row-fluid">
    <div class="span3">some contents</div>
    <div class="span3">some contents</div>
    <div class="span3">some contents</div>
    <div class="span3">some contents</div>
</div> 

Just be sure to update the .span6 in my above code to match your new .span3

I hope this helps someone else :)

Categories: jQuery

Tags: , ,


Comments

Related Posts: