Hello Everybody, 

I have an equal-height problem I want to solve using the 
Prototype-Framework. The problem presents itself in the context of the 
following HTML-Markup of a Product Grid: 

<div id="products-list-view">
  <div class="products-grid">
    <div class="item">Contents</div>
    <div class="item">Contents</div>
    <div class="item">Contents</div>
  <div class="products-grid">
    <div class="item">Contents</div>
    <div class="item">Contents</div>
    <div class="item">Contents</div>

The Style-Declaration for the markup above are as follows:

#products-list-view div.products-grid {
  border-bottom: 1px #B7B9B8 dotted;
  display: block;
  height: 100%;
  overflow: hidden;
  padding: 0 0 0 1.6%;
#products-list-view div.products-grid > div {
  display: block;
  float: left;
  margin: 0 3% 0 0;
  padding: 30px 0 30px 0;
  position: relative;
  width: 30%;

The <div class="item"> elements have different heights since their amount 
of contents vary. In order to harmonize the height of every <div 
class="item"> element in every <div class="products-grid"> row I used the 
following Javascript/Prototype code.

<script type="text/javascript">
  // loop through all div.products-grid elements 
  $$('div.products-grid').each(function(r) {
    // get the height of the current div.products-grid element        
    var rowHeight = r.getHeight();
    // for debuggin purposes
    // alert(rowHeight);

    // select all div.item element within the current div.product-grid 
    var columns = r.select('div.item');

    // make each div.item element as high as the current div.product-grid 
    columns.invoke('setStyle', {height: rowHeight + 'px'});

Unfortunately the codes doesn't work. The height which is assigned to the <div 
class="item"> element via the setStyle method doesn't correspond to the 
height I get shown on the screen when I would use the alert(rowHeight)method. 
However this is only the case when I choose to comment out the alert(rowHeight) 
method. When I choose to use it, the correct height is written in the 
style-declaration created via the setStyle method.    

I really don't get this. Does anyone have an idea how to fix that? 

Best regards and thank you, Matthias

You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To view this discussion on the web visit 
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
For more options, visit this group at 

Reply via email to