Essential Grid in accordion not loading properly

[bradkerin]

Hi there,

I am using essential grid galleries in accordions on our members subdomain, and in tabs on our public website. Whenever I load the page and open the accordion/tab, the gallery doesn’t load properly, instead the gallery thumbnails show as tiny 1cm squares on the top left hand side of the element area. It force loads when I click one of the category buttons, but for the end user who doesn’t know to do this, it just looks broken.

Looks to be a similar issue to the one in this other forum post, (in that perhaps the js is conflicting with the accordion and tab elements) but I’m not sure.

Any ideas of how I might fix this? Thanks so much for your help in advance!

[christian]

Hey @bradkerin,

Essential Grid or any display powered by Javascript was not really meant to be placed inside another Javascript powered interface like accordions and tabs. The real solution to this is to avoid such a setup or combination of display moreover that custom coding is beyond the scope of our theme support.

If you wish to continue with your setup, please note first that what I’m going to provide is just a guide and even in the thread you’ve read. The code provided was just to guide users on what to do for this case. My colleague just forgot to make that clear.

Add the following code in both of your site’s Theme Options > JS. I’ve tested this in the console and it works in your site.

(function($){
  $('.x-nav-tabs-item, .x-accordion-toggle').on('click', function() {
    setTimeout ( function() { $(window).trigger('resize') }, 300 );
  });
})(jQuery);

Please note that in case this doesn’t work still on your end, you need to consult with a developer to investigate what’s conflicting with the code in your site. That is because as I’ve said, custom coding is outside the scope of our theme support.

Hope that helps and thank you for understanding.

[bradkerin]

Thank you so much - that worked perfectly! Understand it’s not ideal, but that workaround is great.

Thanks heaps

[lely]

You’re always welcome @bradkerin!

Cheers.