VC tabs do not adhere to full height on open

Support
#1

Hi guys.

The VC tabs in the ‘gallery’ page ( containing sliders) re no longer adhering to the ‘full height on open’ jQuery you had previously helped us put in place.
Could you please help us with why this might he happening. Nothing has been changed.

  • My suspicion is it may have something to do with Visual Composer updating - to which we of course do not have access to as we are using the VC version supplied to us through PRO - however can you please confirm this for us, or might there be another cause that I may not be aware.
#2

Hi There,

There’s an error when I check. https://screencast-o-matic.com/watch/cbiFnLlTnF

See this: https://support.cloudflare.com/hc/en-us/articles/200171926-Error-524-A-timeout-occurred

#3

Hi Lely , thank you. We are looking into ways to resolve this now. Our host did have some trouble at one of its centres so we are hoping this is the cause , will update on progress when we know more :slight_smile:

#4

Sure, do let us know.

Thanks!

#5

Hi Guys, I have been informed the timeout has been resolved however the issue persists.

My suspicion is that it may have to do with visual composer needing an update (I have purchased a licensed version for this only to discover PRO uses a modified version of VC and updates from the license aren’t possible.

I does appear from what I have learned from support that for this situation, in using VC for this page - I will need to reinstall the code each update, when each VC update is supplied through PRO theme upgrade ( which while obviously more annoying - is doable ) however in the mean time , the problem with the tabs not displaying correctly persists despite resolving the timeout error ( as far as I know)

For reference I had enquired about this is a seperate ticket (so tickets arent getting crossed over )
you will find the enquiry for this here

Returning to Lely’s response for the issue fix above;
Could you please let me know if I have understood the correct methods to resolve this issue, if this is indeed related to a VC upgrade discrepancy, and what the next step to resolve this could be (as obviously this is a problem both us and yourselves at themeco spent a lot of time resolving, and when we finally had it working properly - to now have it not working again is super frustrating [for you as well no doubt ] and it’s really not sitting too well with the site owner)

Please let me know what you can on the most likely move to resolve this recurring issue !

#6

Hi there,

The timeout issue is been there even from old versions, one of the reasons the emergence of the cornerstone. The VC creates too many connections when it’s generating the preview and even when processing it. It can introduce 200 spam connections if the current page’s builder has long content. Some host doesn’t like that and they even some blocks when it reaches 20 connections. And unfortunately, we can’t control it.

And these issues are not related to version gap or license.

Would you mind providing your CloudFlare’s login credentials as well? Or perhaps turn it off by removing the nameservers temporarily. Maybe it has issues serving some assets from your site and I like to check it.

Thanks.

#7

hello,

We had a tech support guy (who installed cloud flare) to check the above for you - and he declared no issue with that part of it.
He advised that javascript optimisations were never turned on in cloudflare, so it couldn’t be this.

He additionally made a clone of the site with no caching active to text - which did not resolve anything either. I will contact WP Bakery as well and see what they can provide.

#8

Hi there,

Upon checking the Gallery page I see that it is working ok. The idea of having sliders inside Tabs is wrong from the first place as Javascript can not calculate the height of the inside content while the content is hidden in a tab. Elements that depend on Javascript height calculation such as Sliders will not show correctly.

You should keep the content of the tab simple. There are hacky workarounds to force the Javascript to recalculate the height on window size change or tab change, but those methods are not stable and are not officially supported. So please kindly consider whatever code is given to you as a temporary workaround which it seems not to work now.

The ultimate solution will be avoiding the addition of Sliders inside tabs, accordions, …

Thank you for your understanding.

#9

Hi Christopher,
Thank you for explaining- totally makes sense. I’d like to be able to find something else which come replicate this style, as if I am understanding correctly there is no possible resolve for this situation.

I’m now intending to try this out with the basic slider to see if I can get a similar result. Please let me know if this sounds like a possible answer or if you think it will not be effective.

I will update on any developments which may lead toward a solution.

#10

Hi there,

If it’s just about re-rendering, then please add this code to your custom global javascript.

var render_timeout = 0;

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

clearTimeout ( render_timeout );

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

} );

That should re-render the slider added to the tab. And sorry about the confusion, I thought you’r’ referring to tab full height.

Thanks!

#11

OH right ! I was a little confused by that, makes sense now.

Thankyou !

I will add this code in asap and update.

#12

Thank you for adding the code, and thank you for considering the alternate way regarding the tabs and galleries.

#13

Hi guys,

I have put in the code to custom global js; however I am not confident I have put it in correctly, as at this point it shows no change.
Could you please review what I have entered currently, as I feel as though there may be something out of place.

from top to bottom , in the global custom js currently :

jQuery( function($) {

$(document).on(‘click’, ‘.vc_tta-tab a’, function() {

setTimeout( function() {

$(window).resize();

}, 350 );

} );

} );
jQuery(document).ready(function($) {
if ( $(‘html’).hasClass(‘touchevents’) ) {
$(’.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a’).off(‘click touchstart touchend’);
}
});
var render_timeout = 0;

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

clearTimeout ( render_timeout );

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

} );

I feel like something isn’t where it likely should be here, however I am not sure where exactly.

#14

Hi there,

Ah, you mean VC native tabs? There are two kinds, from cornerstone tab integrated to VC, and the native tab. Would you mind providing the exact URL where these tabs are? For the meantime, you may change it to this


      
jQuery( function($) {

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

setTimeout( function() {

$(window).resize();

}, 350 );

} );

} );

jQuery(document).ready(function($) {
  if ( $('html').hasClass('touchevents') ) {
    $('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a').off('touchstart touchend');
  }
});
var render_timeout = 0;

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

clearTimeout ( render_timeout );

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

} );

Thanks!

#15

Hi Guys ,

I believe currently they are integrated tabs. However I am not certain.
In either case, the code you have provided seems to be working perfectly ! :smiley:

Please find included the direct URL as requested.

I am very much looking forward to you reviewing this to make sure, as for now it seems you have created the resolve !

Edit: on the run js, it appeared to work , on a subsequent browser check without being logged in the issue remains , the details provided will likely give you some more insight - looking forward to hearing from you.

Added : upon further inspection - it appears to be working correctly on all desktop tabs now except the first one ‘stainless’ so there might be something slider specific more than tabs specific there too.

(unfortunately while the tabs on mobile are opening full height for the most part now, they still displaying blank [no images showing in the tabs] - this might be the next thing to tackle )

#16

Hi there,

Please make sure to clear both your site’s cache and your browser cache, change is not instant so it may appear working on your current view, but not in the other browsers. It’s common in WP Development which cache plugins, or perhaps, deactivate your cache plugins since you’re still developing it. This makes sure the changes we’ll add will be effective almost immediately (mostly). Could you provide a video recording related to “Stainless”, and the no images as well? I like to see them first to determine what I should do next.

Thanks!

#17

Hi,

Awesomely it is working fine on desktop now ! I did clear out cache initially, but it must have just needed some time for the first tab to react to the new code. Excellent work on that thank you ! - it has been a real challenge.

Unfortunately I do not have a program that will record the mobile tabs at the moment.
I can tell you at times the first tab will open and displays properly, however the other tabs will not open at all on mobile / or will show no image when they do.
While editing in PRO they operate fine, however upon mobile device they remain closed regardless of action.

I will look for a program that will allow recording of mobile for you.

#18

Hi there,

Glad that you managed to fix the issue. I think the code we have provided will not work for all mobile devices due to lack of support for some features and the wrong calculation of the set timeout function of Javascript in some cases.

I suggest that you hide the whole thing in mobile view and try to have a simpler view without tabs and sliders. For example, you can stack all sliders with the title.

I know it will be a long page regarding that, but it will be better than not being able to see the other tabs.

Thank you for your understanding.

#19

Hi Guys,

That sounds like it could be a good resolve. Can you please let me know how I would go about hiding that content row as suggested & I will see what I can do for the mobile gallery.

#20

Hi there,

Please inspect your section and click manage layout, there, you’ll see your rows. Then click the magnifying glass action of your target row to inspect it, then find the options HIDE BASED ON SCREEN WIDTH then hide it from mobile devices.

Thanks!