musicmaster Posted August 21, 2015 Share Posted August 21, 2015 (edited) I have a problem equalizing my associated products. When I just load those I get unequal rows as some products have longer descriptions than others: I want to make all products the same size like this: For that purpose I have allocated all products on the same row the same classname. After the page is loaded I run a little bit of javascript to give those products on the same row the same height: rowindex = {$rowindex}; {* get the number of rows that need to be processed *} $(document).ready(function() { setTimeout(equalize_rows(),500); }); function equalize_rows() { for(var i=1; i<=rowindex; i++) { var maxheight = 0; $('.accessorrow'+i).each(function() { thisheight = this.offsetHeight; if(thisheight > maxheight) maxheight = thisheight; }); $('.accessorrow'+i).each(function() { this.style.height = maxheight+"px"; }); } } Unfortunately the result is often the following: This result is not consistent. You may see the first time the distorted image and all following times the correct image. Results become worse when the Prestashop option to move all javascript to the bottom (now disabled). In that case the page tends to stay distorted. The core of the problem is that "this.offsetHeight" returns sometimes a much too low value. But I have no idea why: the page is ready and I have even built in an extra delay. Does anyone have a solution for this? The page itself can be found here: http://www.hout-in-huis.nl/moso-top-bamboo/164-top-bamboo-side-pressed-caramel-transparant-gelakt.html The Prestashop version is 1.6.0.14 Update: a search on internet delivered that there are some problems with offsetHeight (and also its relatives like scrollHeight). It works when things are defined, but it gives a problem with fields that can have different lengths and are not explicitly defined (like the description field). As I couldn't find any solution for this I have accepted that blocks will be different lengths. To prevent the flow of products going wrong I have added a "clear:both" for the first product of each row. Edited August 24, 2015 by musicmaster (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now