[Proto-Scripty] equal height problem with nested divs in product grid

[meinbrodt]

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>
  <div class="products-grid">
    <div class="item">Contents</div>
    <div class="item">Contents</div>
    <div class="item">Contents</div>
  </div>
  ...
</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">
//<![CDATA[
  
  // 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 
element            
    var columns = r.select('div.item');

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

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 
https://groups.google.com/d/msg/prototype-scriptaculous/-/3EBJVQuxq54J.
To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com.
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en.