Disable matchHeight on Mobile

[kaspar-allenbach]

I want to disable certain matchHeigh elements on mobile devices.

So I wrote this:

if ($(window).width() < 768) {
    $('.noMatch').matchHeight({ remove: true });
  }

The idea would be that elements with .noMatch wouldn't fire on devices with less than 768px.

But it doesn't work. How would I have to write this properly?

[liabru]

I think this should work, could there be a problem somewhere else in your code? You could also try only selecting the required elements, so you wouldn't need to use remove.

[Bobz-zg]

I would +1 for an option to define attribute min/max eg: <div class="item" data-mh="group-name" data-mh-min="768"> .. </div>

[patrickfweston]

I used the following function that I attached to the jQuery object:

(function ($) {

    // Add a function to jQuery that lets us add/remove the matchHeight script
    // depending on a breakpoint.
    jQuery.fn.equalHeightResponsive = function(breakpoint) {
        if ($(window).width() < breakpoint) {
            // If the matchHeight script is active, remove it from this set of elements
            if (this.data('matchHeight') === 'true') {
                this.data('matchHeight', 'false');
                this.matchHeight({ remove: true });
            }
        } else {
            // If the matchHeight script hasn't been added, add it in
            if (this.data('matchHeight') === 'false' || typeof this.data('matchHeight') === "undefined") {
                this.data('matchHeight', 'true');
                this.matchHeight();
            }
        }
    }

})(jQuery);

Then, you can call it on your items on page load and window resize:

$(document).ready(function() {
        $('.card').equalHeightResponsive('900');
    });

$(window).resize(function() {
    $('.card').equalHeightResponsive('900');
});

I used a data attribute value as a flag to see if the script had already been added/removed. This way, you're not attaching a bunch of handlers to your elements and running the matchHeight script a bunch of times. There's probably a better solution, but this is working for me.

[liabru]

I think there's a pull request related to this see #65, does that help anybody?

[aravikanti]

@liabru +1 for the merge.

[kyds3k]

Just to add my 2 cents in, I simply disabled the inline CSS using a media query and this technique:

https://css-tricks.com/override-inline-styles-with-css/

Took me no time and worked a treat!

[ezetojo]

Working solution for bootstrap 3. Based on @kyds3k answer.

@media (max-width:992px) {
    .match[style] {
        height: auto !important;
    }
}

I used it for xs and sm resolutions. If you want to apply it only on xs change media query to 768px.