I have a group which has content appended to it via AJAX. At the end of the images loading in the group, I show the content.

If I use: $('.blocks').matchHeight(true); it works perfectly fine.

If I use: $('.blocks').matchHeight(true); outside of the $.ajax call and try utilizing $.fn.matchHeight._update(); to trigger an update when the content is shown, it doesn't fire.

I have a few other areas where the content is dynamically adjusted and I'd like to have the matchHeight updated but as of now, I can't do that. I assume sprinkling .matchHeight(true); 's everywhere is probably not the greatest option, so hopefully, I'm just missing something painfully obvious. :smile:

Hey there,

Congrats for your plugin! You might consider setting the min-height param and not the height as it will allow more flexibility; just a quick hint :)

Radu

The plugin is great! However, there is the slight issue of it breaking for Safari (Windows/Mac) and Chrome(Mac)

This is the way it should look:

This is what happens when it breaks:

and this:

It seems like it either doesn't calculate the heights at all, or calculates some of them and negates others.

Safari for Windows 5.1.7. Chrome for Mac 31.0.1650.63

Any fix would be greatly appreciated!!!

Thanks.

Hi! There's some issue with matchHeight plugin on my website in Safari (both Mac&iOS): the height calculated is too small and it varies on multiple page refreshes.

This is a reference look in Chrome: Unfortunately I can't share URL yet since it's a local dev instance.

Hi there,

first of all, this is by far the best equal heights plugin out there. So thank you.

However, I've found this case (simplified in the jsfiddle) where it fails: http://jsfiddle.net/qoaa7d96/1/

I broke this down to the floating figure in the first box being the cause. Switch off float: left for the figure and everything works as expected.

Thanks for looking into it.

Regards Danilo

Scenario: Take for example the thumbnails component in Bootstrap 3.x. Create a responsive grid (.container-fluid) of thumbnails. Create 4 thumbnails inside a single row. Each thumbnail's content should be of different height, well, at least the first thumbnail on the left. Resize down until a thumbnail goes down onto a new line. It should get stuck at the right end of the first taller thumbnail. That's when I gave your plugin a shot to solve that issue.

Since the maximum height is set on all thumbnails by matchHeight, when the window is being resized that maximum height does not change until a certain amount of time has passed (80ms by default) but a responsive grid such as bootstrap's keeps adapting without any delay and that has two visible downsides:

1. The actual resizing is less fluid (sluggish) because of the repeated calculations the plugin has to make to update the height of each item. Setting a higher throttling delay doesn't help either because of downside number 2.
2. When resizing a responsive grid whose content has fixed heights the results are not pretty until the actual resizing ends as is the case with bootstrap's responsive grid system.

Solution:

Set the items' height to auto when a resize event occurs and when the actual resize stops, calculate the max height and set it on every item. You should use underscore's _.debounce function for that. Something like this (snippet from an app I'm developing):

var $win = $(window);
$win.on('load resize orientationchange', _.debounce(resetItemsHeight, 500, true);
$win.on('load resize orientationchange', _.debounce(matchItemsHeight, 500);

I'll make a pull request when I enjoy some free time but right now I'm too busy.

Despite this small issue, great plugin!

Hi,

I'm developing some site and I use your plugin. It's really great and this is the only one that works for me, but I have problem with it in one place. Maybe it's some bug or I do sth wrong. This is the situation: In one row, there are two blocks (A). In each block there are two blocks (B), in desktop view - one next to second.In tablet view, these inside blocks strething to full width (parent block A), so now they are one above other. The problem is, when resize window, heights doesn't change - it stays this same. But, when I refresh window, everything is OK (in tablet/desktop view), the plugin works well untill change from desktop/tablet view problem appears again.

I use your plugin this way:

$(window).load(function () { $.fn.matchHeight._apply('.row-blocks', true); });

and for resize:

var functions;

function functionsResize() { $.fn.matchHeight._update();
}

$(window).resize(function () { clearTimeout(functions); functions = setTimeout(function () { functionsResize(); }, 200); });

If I use plugin in basic way: $('.block').matchHeight('.row-blocks'); everything works well, but window freezes/lags during resizing.

Sorry for my language mistakes, but I don't write in English a lot. Thanks in advance for any help. ;)

Hi,

I'm using the matchHeight.js plugin in my Rails app:

http://188.226.157.101/

I've noticed an overflow issue, where text is overflowing it's div borders. Apparently this only appears on mobile screen sizes.

I'm not sure if the error is caused by the Bourbon Neat grid framework or the matchHeight.js plugin.

Anyone else encountered this issue?

my repository is at:

https://github.com/acandael/beautysalonapp2

the matchHeight.js script is implemented at:

https://github.com/acandael/beautysalonapp2/blob/master/app/views/homes/index.html.erb

thanks for your help,

Anthony

hey there. first off, i love the script. the row aware feature is amazing especially for responsive sites.

i am having a strange issue however. in IE8 i am getting the following inline styles on my matchHeight elements.

border-top: medium none; border-bottom: medium none;

it seems .css("border-bottom",""); is not doing its job in IE8 for some reason. I will look into it, but just wanted to let you know.

This works really well except if used on an element that utilizes the css "display" attribute. e.g., display: table; Since the display attribute gets overwritten by the javascript, it breaks the design (unless using !important). Perhaps an optional setting variable could be created for the display attribute?

Hi,

I am a little new to jQuery, so apologies if this doesn't make sense!

We are using an Ajax Layered Nav plugin to dynamically filter products in a WooCommerce project. Initially the shop items have matchHeight applied to them (works like a charm!), but after the Ajax call (no matter what we've tried!), we just can "access" the new content to re-apply the heights function.

Currently we have been able to "hook into" the ajax function, and get things to happen (outside of the newly generated content) once it's done, but nothing we've tried has any effect on the new content.

The code we're using (in our custom theme .js) is as follows:

jQuery( "body" ).on( "aln_reloaded", function() {
    console.log("aln_reloaded done"); // works

    jQuery("#products").css({ backgroundColor: "red" }); // for testing - div just outside Ajax content - works

    jQuery(".products").css({ backgroundColor: "blue" }); // for testing - div just inside Ajax content - doesn't work

    jQuery.fn.matchHeight._update(); // doesn't work

    // Tried removing and then re-applying as per another post on the issue we read - doesn't work
    jQuery('.pw-item').matchHeight({ remove: true });
    jQuery('.pw-item').matchHeight(true);

});

Any help/advice/suggestions would be MUCH appreciated - thank you!

Would be useful to add a little note in the docs about _applyDataApi().

https://github.com/liabru/jquery-match-height/blob/master/jquery.matchHeight.js#L305

In my experience, I had an infinite scrolling grid, and calling _update didn't fix the newly loaded elements.

I had set them up using the data-mh api in the CMS.

Calling $.fn.matchHeight._applyDataApi(); did do the trick, though.

And perhaps adding a note to the _update to say this is also an option.

Is it currently possible to set multiple property attributes?

In this example: $('.item').matchHeight({ property: 'min-height' });

Can I pass property an array? In my instance I need to set the height and the max-height.

Hi Firstly, love the plugin; it makes life so much easier.

But I've ran into an issue.

So I've got a content area, with each row having 2 columns of 50%. One column is an image, and one is content. Now, as per the design, the image alternates between left and right, so my idea is to have 3 columns of 50% in the HTML and use CSS nth-child to either hide the first or last column (the middle will always be content).

This works perfectly, except with matchHeight as the third column is essentially pushed on to a new row due to the width settings.

Is there a way to get it to work the way I have it, or should I just dynamically build the page?

Hi there,

Great plugin first of all. I have used it for many projects with no issue.

However this is the first time I've used it for an e-commerce site with products being added all the time. My problem is that sometimes the elements overlap and the page needs a refresh for the plugin to work. It doesn't happen every time.

It starts to do it's job then stops further down the page (please see attached screenshot as example).

The code used is below:

$(document).ready(function() {
	$(function() {
		$('#product_listings .listing').matchHeight();
		$('#product_listings .listing .img_wrapper').matchHeight();
	});
	// $.fn.matchHeight._update();
});

I use one match height for the whole element and one for the image inside each element.

You'll see $.fn.matchHeight._update(); is commented out because I tried this with no luck. Unless I'm using it wrong?

Any ideas?

Thanks,

Jack

Hey all, I was using this library for a while until I realized yesterday I could use the ResizeSensor class from the css-element-queries library to achieve the same results. I can't tell if it's faster or not though, but it seems like unless something like this is already being done under the hood of this library then it has to be faster.

I'm not quite sure how ResizeSensor does the magic it does, but it provides a hook into a very fast and reliable individual element resize event. Here's a jsfiddle illustrating what I mean. The way I have done it there makes some assumptions as it depends on the user setting up their varying-height columns to contain a single element and for that single element's height to be accurately represented by the clientHeight variable (i.e. no borders).

However, despite dealing with those assumptions, I think it might be faster than this library. Am I wrong? Are you all already doing something like this?

Also, sorry if this is the wrong place to post a question like this. Please let me know where I should post it though!