The Grid inside the tab cornerstone element

Hello,

Is it possible to use a grid from the grid plugin inside a tab element from cornerstone?

I’ve put the grid shortcode inside the content of the tab… and it shows only the filter controls… but not the actually items from woocomerce.

Here’s the link: https://www.controlprint.com.br/cpadesivos/?page_id=4091
It’s in the last tab… on the bottom…

Thanks

Hi @priscilaps,

Thanks for reaching out.

Looks like it’s not yet published, would you mind publishing it and we’ll check? For the meantime, please add this code to Theme Options > JS

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

setTimeout ( function() {

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

}, 750 );

} );

Thanks!

Thanks… I think this code did the trick… or maybe it’s because I published as you suggested.

Thank you anyway.

The only problem now is that is not showing only 3 columns as I’ve setup on the grid

https://www.controlprint.com.br/cpadesivos/home-2/

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