Essential Grid won't display correctly within Tab/Accordion elements

Support
#1

I’m trying to create a layout with a tab element, and each tab item will contain a different Essential Grid (See: http://imgur.com/a/YJume)
The tab or accordion that appears open it will display the media content correctly, but when you swith to the other tab then it lags and you need to wait a about 10-15 secons until the elements are displayed correctly.

#2

Hi there,

That is correct and it is true for all complicated Javascript heavy elements. If you use Tab or Accordion the section which is hidden is not getting any functionalities needed to render.

As a general rule of thumb, you should not use complicated elements inside tabs or accordions or any element that hides part of the rendering at the start.

Essential grids are one of the smartest ones which have a polling to regenerate itself on window resize or changes, but there are many elements that they do not so.

Tabs and Accordions are meant to be used having simple text and images which are too long to stack.

Thank you for your understanding.

#3

What would you suggest to use instead? My goal is to use a switch (like a toggle) to change between two different sets of videos. Accordion or Tabs were perfect for this.

Maybe using a Filter with Essential Grid?

Thanks

#4

Hi there,

You can re-render the grid on every tab’s click and trigger window.resize(). Would you mind providing the site’s URL that has this issue?

Thanks!

#5

The site is not online yet, I’m working on a local server. Would you mind pasting the snippet here?

#6

Hi there,

I’m not sure which tab you’re using, but please try adding this to your global custom javascript

var render_timeout = 0;

jQuery( document ).on('click', '.x-nav-tabs>li>a', function() {

clearTimeout ( render_timeout );

render_timeout = setTimeout ( function() { $(window).resize() ; }, 800);

} );

Thanks!

1 Like