Post by mat7688 » 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.

Attachments

reviewspg.png

reviews page. all the boxes are different heights. - reviewspg.png (298.37 KiB) Viewed 861 times

mainpg.png

main page. these boxes get huge if i modify the review boxes to 340px where I need them. - mainpg.png (289.12 KiB) Viewed 861 times


Newbie

Posts

Joined
Thu Jan 17, 2013 12:19 pm

Post by artcore » 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>

User avatar
Active Member

Posts

Joined
Tue Jul 09, 2013 4:13 am
Location - The Netherlands

Post by mat7688 » Thu Dec 01, 2016 1:00 am

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

Newbie

Posts

Joined
Thu Jan 17, 2013 12:19 pm

Post by artcore » Thu Dec 01, 2016 3:12 am

So did I ;D
Good this also solved it for you,
Cheers

User avatar
Active Member

Posts

Joined
Tue Jul 09, 2013 4:13 am
Location - The Netherlands

Post by korisnik » 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

Newbie

Posts

Joined
Sun Aug 07, 2016 1:21 am

Post by artcore » 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

User avatar
Active Member

Posts

Joined
Tue Jul 09, 2013 4:13 am
Location - The Netherlands

Post by korisnik » 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)?

Newbie

Posts

Joined
Sun Aug 07, 2016 1:21 am

Post by artcore » 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)

User avatar
Active Member

Posts

Joined
Tue Jul 09, 2013 4:13 am
Location - The Netherlands

Post by korisnik » Sat Aug 26, 2017 8:05 am

How to use multi classes in this code?

Newbie

Posts

Joined
Sun Aug 07, 2016 1:21 am

Post by artcore » Sat Aug 26, 2017 1:20 pm

Code: Select all

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

User avatar
Active Member

Posts

Joined
Tue Jul 09, 2013 4:13 am
Location - The Netherlands

Post by korisnik » Sat Aug 26, 2017 7:02 pm

Thanks.

Newbie

Posts

Joined
Sun Aug 07, 2016 1:21 am
Who is online

Users browsing this forum: No registered users and 19 guests