OpenCart Community

Posted: **Wed Nov 30, 2016 11:49 pm**

Hey all,

Can anyone point me in the right direction of getting these product boxes to become the same height?
I messed with min-height but that changes ALL of the product boxes, so I'd have perfect sized ones in the reviews page, and way too big ones on the main page (see screenshot for reference).

So then I tried using PHP to detect the url, and resize the boxes accordingly (depending on the URL) but failed miserably. No idea why it wasn't working and I lost the code I was using.

The main issue here is the content in each box varies. So on a page like Customer Reviews, it looks sloppy because all of the boxes are different heights. Same with some of the products page (just not as bad).

I assume I have to modify this code but not sure what to change. This is the min-height I've been playing with.

Code: Select all

@media (min-width:767px){.product-list .product-thumb .image{float:left;padding:0 15px}}.product-thumb .caption{padding:0 20px;min-height:150px}.product-list .product-thumb .caption{margin-left:230px}

Thanks in advance.

Posted: **Thu Dec 01, 2016 12:14 am**

I solved this with javascript. You can this in the footer.tpl of your template:
I added a comment on the grid variable. Mine is set to 'caption' class of the product box but you can try other divs, classes etc...

Code: Select all

<script>var highest = 0;

		function sortNumber(a, b) {
			return a - b;
		}

		var maxHeight = function () {
			var heights = [],
				grid = $('.caption');//this is the part that changes in height. change to suit your needs

			grid.each(function () {
				$(this).css('height', 'auto');
				heights.push($(this).height());
				heights = heights.sort(sortNumber).reverse();
			});
			highest = heights[0];
			grid.each(function () {
				$(this).css('height', highest);
			});

		};
		$('#grid-view,#list-view').click(function () {
			maxHeight();
		});
		$(window).resize(maxHeight());</script>

Posted: **Thu Dec 01, 2016 1:00 am**

wow. I spent hours messing with this (I suck with code), THANK YOU. !!!!

Posted: **Thu Dec 01, 2016 3:12 am**

So did I

Good this also solved it for you,
Cheers

Posted: **Sat Aug 05, 2017 11:26 pm**

I need this,but i don't know to implement.
Where in footer.tpl,need to paste this code?
I use opencart 2.3.0.2

Posted: **Sun Aug 06, 2017 2:55 am**

Just above </body></html> is usually the spot. Don't forget to include the <script> tags.
Clear the ocmod cache; Do some googling if you don't know how to do this.
Your footer should be at catalog/view/theme/default/template/common/footer.tpl

Posted: **Sun Aug 06, 2017 9:29 am**

I did it...
Now all caption equals like smallest caption,is it possible opposite(all caption height like biggest caption height)?

Posted: **Sun Aug 06, 2017 3:20 pm**

It already takes the highest height of a .caption element and applies it to others. You can also try other elements by looking at the html markup via browser developer tool (F12)

Posted: **Sat Aug 26, 2017 8:05 am**

How to use multi classes in this code?

Posted: **Sat Aug 26, 2017 1:20 pm**

Code: Select all

grid = $('.caption, .css-class2, .class-nth');

Posted: **Sat Aug 26, 2017 7:02 pm**

Thanks.

Posted: **Mon Dec 18, 2017 7:23 pm**

Hello, The JS code I run from the Chrome Console does not work when I add it to header.twig or into custom.js. Can you help? I use to Bigshop Theme

OpenCart Community

Fixed height to product boxes

Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes

Re: Fixed height to product boxes