isotope script is not working in Elementor Editor – WP 5.7

I am facing an issue with isotope code in WordPress 5.7. It doesn’t take image height and creates overlapping issues in the elementor editor. It displays perfect on the frontend, but in elementor editor, it doesn’t work.

Example screenshot: https://paste.pics/C162E

When I switch to “Legacy 1.12.4-wp” with the “jQuery Migrate Helper” plugin, it works perfectly, but I can’t use this solution for my clients.

isotope library version is 3.0.6

I am using the below code for the widget.

jQuery(document).ready(function($) {
  var myPFClass = '.my-portfolio-' + '<?php echo $this->get_id(); ?>',
    $this = $(myPFClass),
    $isoGrid = $this.children('.my-portfolio-grid'),
    $btns = $this.children('.my-portfolio-btns'),
    is_rtl = $this.data('rtl') ? false : true,
    layout = $this.data('layout');

  $this.imagesLoaded(function() {
    if ('masonry' == layout) {
      var $grid = $isoGrid.isotope({
        itemSelector: '.my-portfolio-item',
        percentPosition: true,
        originLeft: is_rtl,
        masonry: {
          columnWidth: '.my-portfolio-item',
        }
      });
    } else {
      var $grid = $isoGrid.isotope({
        itemSelector: '.my-portfolio-item',
        layoutMode: 'fitRows',
        originLeft: is_rtl,
      });

    }

    $btns.on('click', 'button', function() {
      var filterValue = $(this).attr('data-filter');
      $grid.isotope({
        filter: filterValue,
        originLeft: is_rtl
      });
    });

    $this.find('.my-portfolio-item').resize(function() {
      $grid.isotope('layout');
    });

    $btns.each(function(i, btns) {
      var btns = $(btns);

      btns.on('click', '.my-portfolio-btn', function() {
        btns.find('.is-checked').removeClass('is-checked');
        $(this).addClass('is-checked');
      });
    });

  });

});

Please help me to fix this issue.

Thank you ??

• This topic was modified 3 years, 8 months ago by maxcode21.