Search Results for 'Masonry'

[Trevor]

Wherever you have the form shortcode, place the other after it, in the one block, like this, making sure there is also a script there (make sure you enter this in the Text tab of the widget):

[searchandfilter id="8208"]
[searchandfilter id="8208" action="filter_next_query"]
<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

They should all be in the same text widget.

Then, in the Posts Grid, make sure that Masonry is enabled.

[Anonymous]

I agree. Masonry works for my site. Really appreciate the support.

[Trevor]

The workaround is not so easy. Masonry should not be changing the grid so much. It is still a grid system.

[Anonymous]

I have applied your solution to the posts and it works perfectly when applied to the masonry style. Is there also a workaround for the grid layout as well? Thank You

[Trevor]

I think I can see the issue. The desktop and mobiles grids are the same, but CSS makes them different. Both use the Masonry (Isotope) script to recalculate sizes etc.

Does Beaver Themer give you the option to disable this? It looks to me like you only have one column, and Masonry will do little on just one column.

Otherwise, you or Beaver Themer need to figure how to reload that masonry when our Ajax fires.

Before you go to them, try disabling Ajax in our plugin. This will casue page reloads, but should not then have the issue you first described.

This post describes generally how to reload Masonry:

https://support.searchandfilter.com/forums/topic/reload-masonry-grid-after-ajax-call/#post-165867

It is public, so the folks at Beaver Themer will be able to read it.

[Trevor]

In the Post grid setup, do you have Masonry enabled? If not, can you try that? You would need this script on the page (you can put it inside the simple text editor pane – not the visual text editor pane of the widget – of a Text Widget):

<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

It can be in the same Text widget at the shortcodes for the form and the filter_next_query action, in which case the whole thing would look like this (your ID will be different:

[searchandfilter id="222"][searchandfilter id="222" action="filter_next_query"]<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

[Anonymous]

I did just add your function to [searchandfilter id="2514"]. Its not a Text Block but a HTML block, I guess that makes no difference though?

(Masonry Option was on already)

No Change so fare

[Trevor]

OK. Is the Masonry option ON in the Elementor Post Grid? It is best to be ON.

In the text block where the [searchandfilter id="2514"] is, add also this code (in Text mode):

<script>(function ( $ ) {
	"use strict";
	
	// detects when the ajax request has finished and the content has been updated
	// re-init the layout scripts from Elementor
	$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
		elementorFrontend.hooks.doAction('frontend/element_ready/posts.classic', jQuery('.elementor-widget-posts'));
	});
	
}(jQuery));</script>

[Trevor]

Great to speak with you Niels. You are going to contact the theme author to see if they can help with the script required to re-trigger Masonry after our Ajax has run.

[Trevor]

Hi

If I disable Ajax in the settings, it seems to work. Can you confirm this?

I think you have some redirects or rewrites happening of the portfolio categories.

Also, I note that your portfolio page is using Masonry, but for your type of grid that is not necessary. The Masonry script is complex to integrate with Search & Filter (it can be done, but requires the help of the author of the portfolio grid software to help). Is it possible to disable that feature (some themes/plugins allow it to be disabled)?