Essential Grid in Tabs

[SaltechSystems]

Hello,

I’m trying to use essential grids in different tabs, but when I go to load each of the tabs the essential grid shows up small in the top left corner and takes a while to load.

I have read a few forum posts about this problem and have tried the different solutions provided in those discussions but they haven’t fixed the problem for me.

I am using X Pro and I have tried this solution that worked for someone in another thread but didn’t work for me:

[data-x-toggle-collapse].x-collapsed {
height: 0 !important;
overflow: hidden;
padding: 0;
display: block;
}

Thank you

[christian]

Hey @SaltechSystems,

I’ve tested that code on my end too and that does not work. It’s not recommended that you insert a Javascript dependent display like masonry grids and sliders inside another Javascript dependent container like tabs and accordions. It’s because their display calculations or dimensions are not synced especially if they’re not made by the same developer like in the case of Essential Grid and Pro.

Tabs and Accordions were also meant to display static content. Dynamic content especially powered by Javascript like a Masonry grid might not work and we can’t fix that as part of our support service as I’ve said, it’s not the intended use. I’m sorry if this was not elaborated in the threads you have read.

Thank you for understanding.