Issue with multiple masonry in a page and how to initialise / destroy it

I have issue with multiple manonry in a page. The issue is, only one masonry will work as it should and another, albeit does load, but doesn’t work as been set (i.e no animation, column setting doesn’t work etc.). I’ve tested when disabling one of the masonry, then another will work. So I think there’s probably issue with having more than one masonry in a page.

So I’ve read through here before headed to official masonry website and read there’s method to initialise and destroy the masonry. I think it might help with my issue if I can destroy the first masonry before reinitialise another. Let me know if there’s better or proper solution for this issue and how. Thanks in advance.

Note: Data driven masonry loaded in routing content page. Each masonry resides within section with dynamic attribute: show.

The Wappler Devs are aware of this issue - I reported it too a while back. Changed my layout to normal repeats instead of masonry till they fix it.

Good to know they’re aware of this issue. Using conditional region instead of hide/show resolved my issue as for now.

1 Like

Faced the same problem

I am having the same problem with my second masonry on the same page (static), I was sure it was me doing something wrong but I see from this post that the issue have been reported since sept 2019 and is still not solved…

Is there still a problem with this?
I have two masonry layouts on my page (both show, no hidden sections or tabs).
The first masonry works but the second does not.
Both are data driven with repeat sections and have some additional js to manage hover etc. but the layout doesn't work on the second masonry, only if I remove the first masonry.
Using 7.0.0 rc1