VC tabs do not adhere to full height on open

[rad]

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!

[mellinco]

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 !

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 )

[rad]

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!

[mellinco]

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.

[christopher]

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.

[mellinco]

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.

[rad]

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!

[mellinco]

HI,

This sounds like how I would usually do it using PRO, however this page is edited with VC to achieve the gallery style we needed (that’s why I’m stuck on this).

Is there a similar setting in Visual Composer I could utilise ?
(as far as I am aware I cannot use both PRO and VC on same page)

[Jack]

Hi there @mellinco,

Thanks for writing back! There are responsive controls for elements within Visual Composer and columns within Visual Composer. There’s a useful tutorial video here: https://vc.wpbakery.com/video-academy/control-elements-different-devices-responsive-column-controls/

However if that doesn’t work out, you could add a new class to the element in Visual Composer, then use a media query to hide the column/element on specific devices.

Thanks!

[mellinco]

Hi Jack,

I cannot see those settings following the video. Iv’e looked everywhere I could think they might be as well, but cannot see them anywhere.

It would be great if this is a setting I have overlooked, however - if they are not there,
how would I add a new class to the element and use a media query to hide the column/element on specific devices as suggested ?

[rad]

Hi there,

Ah, sorry for the confusion from my previous answer. I thought you’re switching to other implementation since VC has issues with tabs.

As for the HIDE BASED ON SCREEN WIDTH, it’s equivalent in VC is by adding Visibility element, then add your other elements within it. I made a video recording.

Thanks!

[mellinco]

Hi Guys,

Thank you for the video it was extremely helpful for understanding !

Unfortunately I have not managed to initiate the hide on mobile successfully.

• Additionally through hitting the wrong button I have managed to force a visible popup (see att) that I don’t know how to remove

I understand where the setting is and have successfully created hidden from desktop content. However I am unable to create a visibility rule for the 'tabs’ used for the gallery to hide it on mobile.
I am suspecting either this method may not work on ‘tabs’ or it needs to be perhaps done before adding content ? (which is obviously a problem if so as the gallery already exists )

Please let me know in either case so we may continue toward a resolve for this issue, and it would be great if you could tell me how to remove the ‘Enter js’ popup there as I only clicked on it accidentally, and input nothing & didn’t save it in, (yet for some reason it is still publicly visible) so of course obviously this is not needed and will confuse any viewer.

[Jack]

Hi there,

I’ve taken a look at this and can’t seem to locate where the JS is coming from. Can you remember the button you clicked to add that? If possible please attach a screenshot.

Regarding the hiding of the elements, you won’t be able to hide individual tabs using that method, but you could hide the entire section of tabs. Alternatively you can hide the tabs using CSS media queries.

If you can let me know the devices the tabs/tab should be hidden on and I’ll add some media queries for you.

Thanks!

[mellinco]

Hi Jack,

the tabs in the gallery page i.e. labeled ‘stainless’, ‘aluminium’ etc. I would really like to have them hidden on mobile devices so we can create an alternate gallery for mobile display.

I am fairly sure the button was just above ‘visibility’ in the backend of VC, while intending to select ‘visibility’ in trying to hide the gallery tabs . pls see att.

[rad]

Hi there,

You have to remove that raw javascript if you’re not gonna use it, else, there will be a default content for that, like that pop up. It’s under your Wood tab content.

And yes, you will; have to create the tabs within visibility element, you can’t drag and drop existing element to it, it’s different structure that standard columns/rows.

Thanks!

[mellinco]

Hi Guys,

I found and think I have successfully removed the js & subsequent popup.

Is it still possible to hide the current gallery tabs from mobile using media queries as Jack , rather than recreate the entire tabs section and hiding it via visibility functions of VC?

This would be really helpful as making the gallery behave and display how we wanted it to has taken months,
and hiding the existing tabs from mobile seems far more likely to be successful than remaking the desktop gallery again,
and then we can make an alternate simpler gallery for mobile hidden from desktop as planned.

[rad]

Hi there,

That’s doable by adding classes to your tab section’s Class input. These are the classes you could use

cs-hide-xl cs-hide-lg cs-hide-md cs-hide-sm cs-hide-xs

Example, if you need to hide it from large screen, then add cs-hide-xl to your tab section’s Class input, or hide them from large to medium like this cs-hide-xl cs-hide-lg cs-hide-md. You can do multiple combinations. It’s the same as using media query, but these are re-usable.

Thanks!

[mellinco]

These worked awesome thank you !

As planned I have created an alternative gallery using VC accordion with each section using Essential Grid. This has been far more successful ! and at this point we are fairly happy with the result.

To make this work with our existing style -

We would like to change the;

background colour of the accordion from white to transparent,

and if possible;

reduce the space between each accordion tab.

I have been searching around the WPBakery database and CSS support sites, however after not achieving any change, I contacted WPBakery, and they have directed me to you guys - as they have explained that PRO theme css will be in-charge of the above, could you please let me know how to go about making those changes

[Jack]

Hi there @mellinco,

Thanks for writing in!

You can use this css to change the width between tabs:

.wpb-js-composer .vc_tta.vc_tta-spacing-5 .vc_tta-tab {
    margin-left: -20px !important;
}

Regarding a white accordion I’m afraid I can’t locate on the gallery page, all I see is the middle gallery section which has a grey background is that what you want to change to transparent?

Thanks!

[mellinco]

Hi Jack,

awesome ! thank you for the code

No its not the gallery that you referenced, (the one using tabs & sliders)

The only reason I can think you might not be able to see the white accordion, (accordion with Ess. Grid content ) is the gallery I wanted to change the white to transparent on, created using the accordion - is only for display on mobile so it will likely only be visible in backend or mobile preview.