🔗 🐞 Bug Report: Masonry Layout does not work when Load More pagination is active in the Loop Grid (Related to #24187) - [ED-12229]

[IlPizza79]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest stable version of Elementor.

Description

Hi,
I've noticed some issue with Loop Grid Masonry layout and some kinds of paginations, like "Infinite scrolling" or "Load more".
Masonry layout works for the first block of paginated items, just after the page loads; but the next paginated items are NOT displayed in a masonry layout when using "Infinite scrolling" or "Load more" pagination.

Just for the record, masonry layout does works when using "numbers" or "prev/next" paginations.
When I enable Masonry layout in

Steps to reproduce

1. Create a new page with a loop grid widget and some posts;
2. Enable Masonry layout for the loop grid widget;
3. Enable "infinite scrolling" or "load more" pagination in loop grid widget options;
4. Check the page in FE: masonry layout works for the fisrt items in loop but does not works anymore for new paginated items.

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a Blank WordPress theme active (Hello theme).
• I can reproduce this bug consistently following the steps above.

System Info

Click to reveal

== Server Environment ==
	Operating System: Linux
	Software: Apache
	MySQL version: Percona Server (GPL), Release 35, Revision 5688520 v5.7.32-35
	PHP Version: 7.4.33
	PHP Memory Limit: 1024M
	PHP Max Input Vars: 1000
	PHP Max Post Size: 100M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.3.1
	Site URL: https://portfolio.ggservice.com
	Home URL: https://portfolio.ggservice.com
	WP Multisite: No
	Max Upload Size: 25 MB
	Memory limit: 256M
	Max Memory limit: 256M
	Permalink Structure: /%postname%/
	Language: it-IT
	Timezone: 0
	Debug Mode: Inactive

== Theme ==
	Name: Hello Elementor Child
	Version: 1.0.1
	Author: Elementor Team
	Child Theme: Yes
	Parent Theme Name: Hello Elementor
	Parent Theme Version: 2.8.1
	Parent Theme Author: Elementor Team

== User ==
	Role: administrator
	WP Profile lang: it_IT
	User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

== Active Plugins ==
	Advanced Custom Fields PRO
		Version: 6.2.0
		Author: WP Engine

	Classic Editor
		Version: 1.6.3
		Author: WordPress Contributors

	Custom Post Type UI
		Version: 1.14.0
		Author: WebDevStudios

	Disable Comments
		Version: 2.4.5
		Author: WPDeveloper

	Elementor
		Version: 3.15.3
		Author: Elementor.com

	Elementor Pro
		Version: 3.15.1
		Author: Elementor.com

	Ultimate Addons for Elementor
		Version: 1.36.19
		Author: Brainstorm Force

	Wordfence Security
		Version: 7.10.3
		Author: Wordfence

	WP Grid Builder
		Version: 1.7.9
		Author: Loïc Blascos

	WP Grid Builder - Elementor
		Version: 1.2.5
		Author: Loïc Blascos

	WP Rocket
		Version: 3.14.4.2
		Author: WP Media

	WPS Hide Login
		Version: 1.9.9
		Author: WPServeur, NicolasKulka, wpformation


== Caratteristiche ==
	Custom Fonts: 0
	Custom Icons: 0

== Integrazioni ==
	


== Esperimenti Elementor ==
	Uscita DOM ottimizzata: Attiva
	Caricamento delle risorse migliorato: Attiva
	Caricamento CSS migliorato: Attiva
	Icone dei font in linea: Inattivo
	Punti di interruzione aggiuntivi: Inattivo
	admin_menu_rearrangement: Inattivo per impostazione predefinita
	Contenitore Flexbox: Inattivo
	Aggiorna la libreria Swiper: Inattivo per impostazione predefinita
	Contenitore Griglia: Inattivo
	Predefinito per Nuovo generatore di temi: Inattivo
	Header e Footer del tema Hello: Inattivo
	Barra unificata degli strumenti dell'editor: Inattivo
	Landing Page: Inattivo
	Elementi annidati: Inattivo
	Lazy Load immagini di sfondo: Inattivo
	Guida di stile globale: Inattivo
	Transizioni pagine: Inattivo
	Notes: Inattivo
	Ciclico: Attiva
	Invii forms: Attivo per impostazione predefinita
	Snap scroll: Inattivo
	Menu: Inattivo
	Taxonomy Filter: Attiva


== Registro ==
	
Log: showing 20 of 412023-05-31 11:45:14 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.12.2',
  'to' => '3.13.4',
)]
2023-05-31 11:45:17 [info] elementor::elementor_updater Started 
2023-05-31 11:45:18 [info] Elementor/Upgrades - _on_each_version Start  
2023-05-31 11:45:18 [info] Elementor/Upgrades - _on_each_version Finished 
2023-05-31 11:45:18 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.12.2',
  'to' => '3.13.4',
)]
2023-05-31 11:45:19 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.12.2',
  'to' => '3.13.4',
)]
2023-05-31 11:46:17 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.12.3',
  'to' => '3.13.2',
)]
2023-05-31 11:46:21 [info] elementor-pro::elementor_pro_updater Started 
2023-05-31 11:46:21 [info] Elementor Pro/Upgrades - _on_each_version Start  
2023-05-31 11:46:21 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2023-05-31 11:46:21 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.12.3',
  'to' => '3.13.2',
)]
2023-05-31 11:46:22 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.12.3',
  'to' => '3.13.2',
)]
2023-09-06 09:46:33 [info] elementor::elementor_updater Started 
2023-09-06 09:46:33 [info] Elementor/Upgrades - _on_each_version Start  
2023-09-06 09:46:33 [info] Elementor/Upgrades - _on_each_version Finished 
2023-09-06 09:46:33 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.13.4',
  'to' => '3.15.3',
)]
2023-09-06 09:46:39 [info] elementor-pro::elementor_pro_updater Started 
2023-09-06 09:46:39 [info] Elementor Pro/Upgrades - _on_each_version Start  
2023-09-06 09:46:39 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2023-09-06 09:46:39 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.13.2',
  'to' => '3.15.1',
)]

JS: showing 1 of 1JS: 2023-09-06 09:53:06 [error X 2][https://portfolio.ggservice.com/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.15.3:3:1107192] Cannot read properties of null (reading 'getBoundingClientRect') 



== Elementor - Compatibility Tag ==
	
	Elementor Pro: Compatibile
	Ultimate Addons for Elementor: Compatibile
	WP Grid Builder - Elementor: Compatibilità non specificata

== Elementor Pro - Compatibility Tag ==
	
	Ultimate Addons for Elementor: Compatibile

[nicholaszein]

Hello @IlPizza79!

Thank you for submitting your issue! 🙏

Please allow us some time to investigate it, and get back to you with our findings. 🧐

Best regards

[Municornus]

I'm running into the same issue.

The first section of posts loads as expected. Then when loading more posts every new row of posts is aligned by the top, leaving weird gaps in-between posts.

Related, the masonry mode doesn't consider the height of posts and the amount of space available in any column: If all the landscape oriented posts randomly end up in the same column there's going to be a huge empty section on the bottom of that column where the other columns still have content because the portrait orientated posts take up more space.

This makes the malfunctioning infinite scroll in masonry layout look even worse; as the page may load with one column missing a lot of content, then suddenly starting new rows in a now horizontally aligned layout.

[emanuelepinna]

Hi,
I wanted to inform you that the same problem occurs without activating pagination, as you can see in the attached image.

[alesstracker21]

Issue is still occuring, should I roll back to a previous version? Did this work in previous versions?

[Municornus]

Any news on this issue? It looks like it's still happening.

[alesstracker21]

I switched to Unlimited Elements, they have a working solution, if you REAALLY need it

[mbaierl]

Same issue here. Masonry is not working at all.

[mbaierl]

Same here, not working

[alesstracker21]

A working solution implies that subsequent posts need to be added below the shortest column, just like in masonry.js, and adapt reactively. If they try to just append one on each column but images may have different aspect ratios it is going to look very ugly

[ofmarconi]

I'm also facing this, is there any way to restart the script that calculates the negative margin? I can't find the documentation.

[phkoon]

I can confirm this issue persists with Loop Grid even inside a regular parent flex container (the loop item is composed by only a parent container with a Gallery widget also set to masonry; if the the Gallery widget is not set to masonry, the Loop Grid masonry works fine).
So each item is a small masonry gallery working fine, but I have to zoom in/out or resize the window in order for the Loop Grid masonry layout to get in place; otherwise, it looks like "equal height" is on.

[fanny-peneau]

Same problem here. The loop widget really doesn't work well if you want to use the "load more" functionality.

For my part I have two important bugs:

• the load more button loads all items including those that are already loaded
• Mansory functionality does not calculate negative margin on new items

[rondeo-balos]

Any news regarding this issue? It's been 7 months since this bug is reported.

[Pumpk1in]

Same issue here.
It really needs to be addressed 😭

[phkoon]

Here the masonry doesn't even load at first, I have to zoom in/out in or for the JS to activate.
The issue persists even when the loop grid is set with a loop item composed by only a single image.

[codewizard13]

I'm experiencing the exact same issue. Basically, Elementor's masonry implementation doesn't do TETRIS very well. Note all this extra space. This happens in both the "Load More" and "Infinite Scroll" options.

Would really love any help on a solution as this looks very ugly.

[jabeztadesse]

+1

[jabeztadesse]

Hi guys, I see you have responded to the issue by saying: "Please allow us some time to investigate it and get back to you with our findings". By "some time" did you mean 7 months? Or More? (I'm not being sarcastic, just dumbfounded) ...

[Municornus]

Hi guys. Just wanted to check in with you guys as I reported a site with this issue earlier in the thread and it no longer has it.

I made quite a few changes since I had the issue so I can't pinpoint what (or if anything) fixed it. But just in case, the main things were: I updated wp and plugins several times (everything runs the latest versions), I switched to a different cache system, I rebuild the template of my loop grid blocks (it's exactly the same, just new files).

The masonry still isn't "smart" like in some other services but it no longer leave gaps in there (sometimes briefly on loading but then it corrects to the correct spacing). I'm putting my bet on the updated plugins.

[jabeztadesse]

Hi guys. Just wanted to check in with you guys as I reported a site with this issue earlier in the thread and it no longer has it.

I made quite a few changes since I had the issue so I can't pinpoint what (or if anything) fixed it. But just in case, the main things were: I updated wp and plugins several times (everything runs the latest versions), I switched to a different cache system, I rebuild the template of my loop grid blocks (it's exactly the same, just new files).

The masonry still isn't "smart" like in some other services but it no longer leave gaps in there (sometimes briefly on loading but then it corrects to the correct spacing). I'm putting my bet on the updated plugins.

Just check now with updated plugins + regenerated elementor scripts, cleared cache and CDN. Issue persists ...

[Municornus]

Sorry to hear that! If something else comes to mind that may have had an impact I'll post it.

[leonalonso]

No response after 7 months, and the problem still exists... absurd

[ofmarconi]

absurd

[EmerKelly]

This is the last straw for me with Elementor. I'm so sick of having to work around long-standing bugs and losing money on projects as a result.

[ofmarconi]

@EmerKelly These guys keep pushing AI on us and can't even do the basics! There's a lack of intelligence before making it artificial.

[thapa]

Does anyone have a solution for this issue?

[alesstracker21]

Does anyone have a solution for this issue?

Here is another option if you need it done ASAP and probably the best one i have had so far:
Prompt Claude 3.5 Sonnet AI kind of like this:

I am currently creating a wordpress website of [short site definition] for which I desire to make a paginated search results page using masonry JS, CSS and PHP, I can modify the child theme's files.
The search results to be pulled are (source of media, for example: the woocommerce products that correspond to a search query) and should be displayed using a shortcode that gets put into the corresponding archive elementor pro template. (Or wherever you put it)
Here are the main features required: (modify this part for whatever you need, for example)

1. Have a page selector at the very top of the page. the results from the current page should be displayed after the query gets done.
2. The website runs SearchWP as its search engine, display the results from the searchwp query, make sure to display 40 products only per page.
3. The results page must be full width and filled up using JS in a masonry layout. They should display no name or data, only a masonry layout of the woocommerce product images that when clicked take you to the product page.
4. I wish for the products to appear one by one, lazyloaded, and replacing gray unloaded images as they load. The goal is to provide a premium user experience.
5. Include any style modifications on hover or click that could improve the overall feel of the page to help provide that premium user experience.

I did this and got an extremely well done result for free with a single prompt, you just modify the functions.php file of your child theme and paste the shortcode it gives you wherever you need it.