How to Solve Media Grid and Tabs Widgets Conflict

Mixing and adding some widgets together to get impressive designs may cause some conflicts between them. In this article, we will show you how to resolve the issue when Premium Media Grid for Elementor is inserted inside Premium Tabs widget  for Elementor

Typically, the first tab will always work fine.

Elementor Media Grid widget in Elementor Tabs widget
Premium Media Grid Widget and Premium Tabs Widget Combine Together

But switching to the second tab, you will notice that the media not loaded successfully.

Display issues with Elementor Media Grid and Tabs widgets
Media Widget not Loaded Cause of Conflict Between two Widgets

To solve this error you need to insert custom Javascript code into the page that contains the Tabs widget.

So, you can follow these steps to solve this problem in 1 minute .

Step 1: You need to insert HTML from Elementor below the tab widget.

Elementor Media Grid and Tabs widget issue solution
HTML Widget in Elementor

Step 2:  Add the following code to the HTML widget:

<script>
jQuery( document ).ready(function($){
 
    var $premiumTabs = $('.premium-tabs-container');
 
    $premiumTabs.on('click', '.premium-tabs-nav-list-item', function() {
 
      var $activeContent = $premiumTabs.find('.premium-tabs-content-section.content-current');
    
      $activeContent.find('.premium-gallery-container').isotope('layout');
    });
 
});
</script>
Javascript code for Elementor Media Grid and Tabs widgets issue
Javascript Custom Code to Fix Tab Widget and Media Grid Widget Combination

Once you insert the Javascript code, the grid widget will be refreshed once a tab is clicked.

Elementor Media Grid and Tabs widgets issue fix
Premium Media Grid Widget and Premium Tabs Widget Combine Together

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.