Jump to content

equalizing products in row problem


musicmaster

Recommended Posts

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:

equal4.jpg

 

I want to make all products the same size like this:

equal2.jpg

 

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:

equal1.jpg

 

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 by musicmaster (see edit history)
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...