Masonry core and display:none;

  • I am implementing masonry for a listings page on a new website. The masonry works great except when I try to filter the listings by community. Previously I was using purely css column-count but didn’t like the way it ordered the listings and wanted a bit more backwards compatability. Core masonry is working much better. The catch in all this is that I have a filtering form which adds javascript show() and hide() to items that match/don’t match the criteria (filtering by community).

    While the display:none is being successfully added to each listing’s container div (the same div that is targeted by masonry), the item is still taking up the original space it did, effectively becoming visiblity:none rather than display:none. So what I end up with is a page that takes up the same amount of space but with blank areas between items that match the criteria, forming a patchwork of listings.

    When using the pure css column-count method, it worked as it should and completely removed items.

    Any hints as to why this might be happening or solutions I might try? Thanks in advance.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    Masonry calculates the layout when the page loads and sets arbitrary absolute positioning based on its algorithms. Changing the display style of any elements will not cause any change of any other element’s positioning because of this. In order to refill the spaces, the content needs to be removed, not just hidden (I believe, verify). Then masonry needs to recalculate all the positioning and assign the new values to all remaining elements.

    I’m not sure how to cause re-flow in masonry, but calling whatever is called when the page loads should work. There may be a better way, check the documentation for hints.

    Thread Starter zmancrow

    (@zmancrow)

    Thanks for the response. Makes sense and is what I was suspecting. Not sure how to call a reflow but will look into it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Masonry core and display:none;’ is closed to new replies.