Skip to content

Masonry grid gets height: 0 in Elementor editor after Packery v3.0.0 update from v2* version #569

@maximus2526

Description

@maximus2526

Description:
I am experiencing an issue where a custom Masonry grid (using Isotope/Packery) fails to calculate the container height correctly inside the Elementor Editor, resulting in style="height: 0px;" on the wrapper.

The Setup:
I am using the frontend/element_ready hook to initialize the grid. Even with imagesLoaded and a setTimeout delay, the grid often fails to compute the layout properly on the initial load or when the widget is updated in the panel.

$('.grid-test-masonry').each(function() {
	var $this = $(this)

	if (!$this.find('.grid-test-masonry').length) {
		return
	}

	$this.imagesLoaded(function() {
		$this.isotope({
			itemSelector: '.item',
			masonry: {
				columnWidth: '.item'
			}
		})
	})
})

Question:
Is there a specific Elementor internal event I should listen to, or a recommended way to ensure the DOM is fully "measured" before Isotope/Packery calculates the absolute positions?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions