11.02.2021: There may be a delay in tickets response in the next couple of days. We apologise for any inconvenience caused.


Okay
  Public Ticket #2675561
Collapsed Menu View
Closed

Comments

  •  1
    soulshineastro started the conversation

    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

    Attached files:  Screen Shot 2021-01-29 at 2.11.38 PM.png
      Screen Shot 2021-01-29 at 2.11.33 PM.png

  •  410
    Zhivko replied

    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

  •   soulshineastro replied privately
  •  410
    Zhivko replied

    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

  •  1
    soulshineastro replied

    Zhivko, 

    That did the trick! 

    Thank you kindly!