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 including Elementor Media Grid widget into Premium Tabs widget for Elementor.

Requirements:

  • You will need Premium Addons PRO plugin installed and activated on your website.
  • Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
  • Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Typically, Media Grid widget in the first tab will be loaded 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 will not be loaded successfully.

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

To solve this conflict, 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 one minute.

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

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

Step 2:  Copy and paste the following JS code to HTML widget:

<script>
window.addEventListener('DOMContentLoaded', function() {

    const $ = jQuery;
 
    var $premiumTabs = $('.premium-tabs-container');
 
    $premiumTabs.on('click', '.premium-tabs-nav-list-item', function() {

        window.dispatchEvent(new Event('resize'));

    });
 
});
</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 pasted Javascript code to HTML widget, Media 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

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Related Docs:

Download Now it's free!

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

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.