[Resolved] Issues with masonry views after page reload

[Author]

Posts

[neijibB]

Hello Toolset Team,

I am using the masonry grid to display posts. After selecting filters, the items overlay each other.

It looks like the masonry grid load before the images have finished loading.

If I resize the window of my browser, the masonry grid correctly reset itself.

Do you have a suggested work around? For instance, a simple script to reload the masonry grid after the images are correctly loaded?

REF
hidden link

[Christian Cox]

Hi, I can try to help. The solution may depend on the other systems at work here. Are you using any external scripts for images, like a lazy load plugin or other custom code? For example, if you deactivate all 3rd party plugins except Types and Views, and activate a default theme like Twenty Twenty, is the problem still occurring?

[neijibB]

My issue is resolved now.

We implemented the following fix:
1) We initially hide the Toolset view with a CSS code. We added the class to the columns where we had our Toolset view (under advanced/additional class).
2) We resize the window to force a fix on the masonry

--------------

/*CSS*/
.masonry-on-the-views {
visibility: hidden;
}

/*JS*/
setTimeout(function() {
jQuery(".masonry-on-the-views").css("visibility", "visible");
window.dispatchEvent(new Event('resize'));
}, 1000);