Hi carlos cipolatti,

Those line codes above i just included the library for equal height function.
You need to execute this function on specific case. For example

<script type="text/javascript">
jQuery(document).ready(function($){
$('#ja-ul-lastnews > li').equalHeight();
});
</script>

You can add this block code just after the markup render.

You can take a look on JA Fubix for more information. Though on JA Fubix, we juse

<script type="text/javascript">
jQuery(document).ready(function($){
$('#ja-ul-lastnews > li').liveeqboxs();
});
</script>

This function is written in another script file and internally call equalHeight function.

Regards

thank you very much for your answer. I've tried it and it works great.
thank you!!

in case anyone needs it. I will leave the complete solution that worked for me my to get the same height on the content and sidebar columns:

templates/t3_blank/tpls/blocks/head.php

// T3 BASE HEAD

$this->addHead(); 

$this->addScript (T3_URL.'/js/jquery.equalheight.js');   // equalheight Script 

?>

<!-- equalheight Script  -->

<script type="text/javascript">

jQuery(document).ready(function($){

$('.sameHeight > div').equalHeight();

});

</script>

templates/t3_blank/tpls/blocks/mainbody.php

<section id="t3-mainbody" class="container t3-mainbody">

  <div class="row sameHeight">

    

    <!-- MAIN CONTENT -->

Note: I must say that this solution is only for NO Responsive sites, because in responsive sites its still maintaining the same high value for both columns and this generates large blanks when the columns are placed below the content.

hope will be useful to someone.
regards
C.-

Someone knows a solution that works also on responsive sites?

Someone knows a solution that works also on responsive sites?

I know this question is old but figured I'd leave the answer for others. Chris Coyier over at CSS-tricks.com has a pretty nice script that will help you out. I implemented this on the a T3-blank homepage to equalize height on spotlight modules.

var currentTallest = 0,

     currentRowStart = 0,

     rowDivs = new Array(),

     $el,

     topPosition = 0;



 $('.blocks').each(function() {



   $el = $(this);

   topPostion = $el.position().top;

   

   if (currentRowStart != topPostion) {



     // we just came to a new row.  Set all the heights on the completed row

     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {

       rowDivs[currentDiv].height(currentTallest);

     }



     // set the variables for the new row

     rowDivs.length = 0; // empty the array

     currentRowStart = topPostion;

     currentTallest = $el.height();

     rowDivs.push($el);



   } else {



     // another div on the current row.  Add it to the list and check if it's taller

     rowDivs.push($el);

     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);



  }

   

  // do the last row

   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {

     rowDivs[currentDiv].height(currentTallest);

   }

   

 });

Call that script in and add a Module Class Suffix (if you are equalizing modules) to the modules you want to equalize. I did '_equalHeights' which in turn comes out to be the class '.module_equalHeights'. You can then replace '.blocks' in the script with .module_equalHeights and your containers should be equalized, even on window size change.