Multiple Essential Grids in a Tabbed Content Block

Hi,

I’m trying to use multiple Essential Grids in some tabbed content blocks but I’m only able to get one to display.

Do you have a same solution that works in tabbed content blocks?

Thank you

Hi Frank,

Thanks for writing in! Upon testing, I see that all of your tabs are loading essential grid content.

Could you please try clearing your browser cache and see if that helps. Refer to the following guide if required (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Thanks!

I’m on Safari for Mac and it’s not loading the other tabs until I click another web browser tab and then click back to the site.

Hi,

Thanks for writing in!

Adding Ess. Grid or any other element that uses JavaScript to initialize in tabs or accordions is not a good choice as closed tabs are set to be hidden and thus any element inside it doesn’t initialize properly when the site is first loaded. Some elements like Ess. Grid has functionality to re-adjust their size when browser window is resized.

At this time, you can try adding this CSS code under Theme Options > CSS

.x-tab-content>.x-tab-pane:not(.active) {   
    overflow: hidden;
    padding: 0;
    display: block;
}

Hope this helps

Ok, thanks. That didn’t work for me… I had a solution work for me on an accordion block that you all helped me with so I was hoping to find a solution for this. I guess I’ll look at other methods…

Hello Frank,

As pointed out by Paul, adding the grid inside a tabbed content element is not a good idea. It will fail you most of the time. Please understand that the grid needs to initialize upon page loading. When the tab content area is inactive, the grid will not display because it cannot initialize. As soon as you click the tab content area, all you see if blank and grid display. Please consider changing your layout along with the grids. Grids functions well when being loaded along with the page.

Hope this explains it more briefly.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.