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
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
[email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups "Prototype
& script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
