Ignore elements set to "display: none"

[christianmagill]

If an element in a group is set to display none, it can stop other elements from receiving the proper height.

Sometimes I hide elements at certain breakpoints, and it would be great if only visible elements would be considered to figure height and apply.

[liabru]

This actually an intended as a feature (no really!). Can you try something like $('div:visible').matchHeight()?

[christianmagill]

Thanks for the response,

Would that work when visibility changes at different breakpoints?

What would be the use case for this "feature"? Seems matching the biggest height would be the expected outcome.

[liabru]

Ah you're looking for breakpoint support? Take a look at #65 and +1 if that's what you need. I think there's some code there that someone gave that you can use on the existing version too.

[christianmagill]

Not exactly,

I'm looking for whatever elements are visible to match the highest visible height.

So you could have:

<style>
.item1{
   height: 500px;
}
.item2{
   display: none;
}
</style>

<div class="item1" data-mh="items"></div>
<div class="item2" data-mh="items"></div>
<div class="item3" data-mh="items"></div>

And the end result should be both .item1 and .item3 being set to 500px. Currently only .item1 and .item2 (even with display:none) are set to a height of 500px and .item3 is given a blank style attribute.

Thanks,

[liabru]

The solution I gave earlier for that should work, but if you're dynamically modifying visibility then you will need to remove and reapply matchHeight afterwards each time.