We are using the calendar with multiple time zones on our private membership page. It has come to my attention that the default timezone (in this case, PST) is showing as normal, but when switching tabs to a different timezone, the view will be collapsed (I am guessing this is similar to what would be seen in mobile view).
I have attached 2 screenshots for review.
Is there a setting that I am missing to make sure all timezones are viewed normally, or is there some code or other tweak that needs to be made?
The only way I have found to fix it is to either resize the browser screen or refresh the page on the desired timezone. Obviously, users will not know to do this (or should they have to) making it not user-friendly in its current state.
The problem is that the calendar inside the hidden tab cannot properly get the container width because it's not visible and the script assumes the width is 0. That's why the layout is different.
I'll provide you with a small code you need to insert in your theme or child-theme functions.php but I'll have to inspect the tab html first.
Hello,
We are using the calendar with multiple time zones on our private membership page. It has come to my attention that the default timezone (in this case, PST) is showing as normal, but when switching tabs to a different timezone, the view will be collapsed (I am guessing this is similar to what would be seen in mobile view).
I have attached 2 screenshots for review.
Is there a setting that I am missing to make sure all timezones are viewed normally, or is there some code or other tweak that needs to be made?
The only way I have found to fix it is to either resize the browser screen or refresh the page on the desired timezone. Obviously, users will not know to do this (or should they have to) making it not user-friendly in its current state.
Please advise!
Thank you,
Alyssa Barilar
Website Manager
Soulshine Astrology
Hi,
Where can I take a look at the page?
The problem is that the calendar inside the hidden tab cannot properly get the container width because it's not visible and the script assumes the width is 0. That's why the layout is different.
I'll provide you with a small code you need to insert in your theme or child-theme functions.php but I'll have to inspect the tab html first.
Stachethemes Developer
Hi,
Open your theme or child-theme functions.php file and add following script:
add_action('wp_footer', function() { global $post; if (!is_a($post, 'WP_Post') || !has_shortcode($post->post_content, 'stachethemes_ec')) {
return;
}
?>
<script type="text/javascript">
(function ($) { $(function () {
$('.vc_tta-tab').on('click', function () {
setTimeout(function () {
$(window).trigger('resize');
});
});
}); })(window.jQuery);
</script>
<?php
});
Stachethemes Developer
Zhivko,
That did the trick!
Thank you kindly!