The Grid inside the tab cornerstone element

In this case, please give us access to your WordPress Admin so we could check your setup. Please post the credentials in a Secure Note.

Thanks.

I’ve edited the previous post with a secure note with the user and password

Hi @priscilaps,

It appears to be flex styling related, it works okay on classic tab element. Could you try the classic one?

Thanks!

Hmmm, it worked fine, but with the classic one i cannot have more than 5 tabs, right? Or can I?

and it’s taking too long to load the items

Hello @priscilaps,

With Classic Tabbed Content, you can only have up to 5 items. The items loads slower because it is not covered with the JS code. You will have to update it and use this:

jQuery( '.x-tabs-list button, .x-nav-tabs-item a' ).on( 'click', function() {

	setTimeout ( function() {

 		jQuery(window).resize(); console.log('re-rendered'); 

	}, 750 );

} );

Hope this helps. Kindly let us know.

But I need more tabs… would it be possible to have more tabs in the classic one? or maybe make it work on the new tabs item?

Hi @priscilaps,

Sure, please add this CSS to Theme Options > CSS

.x-tabs-panels {
display: block !important;
overflow: hidden !important;
}
.x-tabs-panel {
    flex: unset !important;
}

Hope this helps.

Hey…
Thanks for helping…
It works for that problem of showing more than 3 columns… but the pages does not change now
The bullets change but it doesn’t change the pages items.

Hi @priscilaps,

Would you mind providing more information of what’s not changed? A comparison will be helpful. It slides okay on my end with the bullets.

Thanks!

When you click the arrows, which I’ve circulated, it was supposed to roll to the right/left and show other 3 items, but here it isn’t happening.

And look at the bullets… they are not aligned.

Hi @priscilaps,

It appears to be a conflict, I’m adding this to our issue tracker. I tried some workaround and unfortunately, nothing works and there is no quick solution. I added this to our issue tracker.

For the meantime, I created an X TEST page on your site where the grid is working. I added the grid within a global block, then use the global block shortcode within the tab. Please check this https://theme.co/apex/forum/t/global-blocks/24723

Thanks!

Thank You @Rad

It must be something I did wrong… I will start all over again :sleepy: and maybe I will get it right :sweat_smile:

You are most welcome!

Hey… I tried starting back from scratch… I’ve put only the codes you had ask me before in this topic, basically.
But it seems to be a conflict when I have more than on grid tab…
https://www.controlprint.com.br/cpadesivos/home-teste-2/
In the first one, the grid navigation works fine… but in the third one the navigation from the grid doesn’t work. (the second only have one item, so there’s no navigation)

it also happens if I use VC… I tried changing the class names on the script you gave me (i’m not sure if its correct) but it didn’t work

https://www.controlprint.com.br/cpadesivos/home-teste-3/

the second tab doesn’t even load the wc items from the grid

Hi @priscilaps,

Yes, it appears to be multiple issues, one is due flex styling coming from the v2 tab that causes the grid styling issue which I can confirm on a test page with just one grid. And another is an issue caused by multiple existing grid.

For VC, the code you need is

jQuery( '.vc_tta-tab a' ).on( 'click', function() {

setTimeout ( function() {

 jQuery(window).resize(); console.log('re-rendered'); 

}, 750 );

} );

Have you tried my recommendation of using global block to isolate the grid from tab containers? I checked and it’s not yet implemented. That seems to be working on my created test page.

Thanks!

Yeah… I tried here
https://www.controlprint.com.br/cpadesivos/home-teste-2/ with multiple grids inside the tabs it was not working… but now I tested again and it’s working… go figure… I will try to working with that…

Thanks… I will test again with VC as well

You’re most welcome and yes, please try the VC as well. Though, I’m not sure what happening on your current view :slight_smile:

Even with your script for VC it didn’t work…
And in this test here https://www.controlprint.com.br/cpadesivos/home-teste-2/ i’ve put some more grids/tabs since it was working and now it’s not working again :sweat_smile: I can’t understand…

I’m starting to think I will have to change the layout strategy cause it’s not working this way… maybe work only with grids but not with tabs…

Hi @priscilaps,

The code is not to fix the navigation, but to fix the visibility since grid are hidden on tabs. And I checked and the pagination works okay, except for that single one in PORTAS, could you try placing a different grid?

But yes, adding grid within a hidden container always has this issue. The tab containers are hidden upload until clicked.

Thanks!

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