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

[Walter Lee Davis]

On Jul 25, 2012, at 11:09 AM, meinbrodt wrote:

> 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?

Make sure that you are wrapping your method in a dom:loaded observer:

document.observe('dom:loaded', function(){
//your code here
});

Unless you do that (or move your script block to right before the closing /body tag) your page content isn't in place when your script fires, so the value you get for height doesn't match what it will be when all of the content is painted to the screen.

Walter

>
> 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-s...@googlegroups.com.
> To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

[Wojtek Zadora]

In case you would like to make equal columns heigt with pure css only try to modify/add your css this:

#products-list-view div.products-grid > div {
    padding-bottom: 500px; 
    margin-bottom: -500px;
}


Should do what you want.
-wz

[meinbrodt]

Hello Walter und Acu,

thank you very much for your replies. I will try both possiblities and see what happens. :-)

Best regards, Matthias

[Victor]

    // 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'});

Try to set minHeight to desired value as equalHeights plugin for jQuery does.