The conflict between the Astra theme and the Kadence block

  • andreslav

    (@andreslav)


    1 year, 3 months ago

    When the smooth scrolling option is enabled, clicking on the tab tab scrolls the page. The solution could be to refine the selector in the js of the Astra theme.

    It was
document.querySelectorAll('a[href*="#"]:not([href="#"]):not([href="#0"])');

Become
document.querySelectorAll('a[href*="#"]:not([href="#"]):not([href*="tab"]):not([href="#0"])');

You can also add this: :not([href*="popup"])

Viewing 7 replies - 1 through 7 (of 7 total)
  • Herman Asrori (BSF)

    (@bsfherman)

    1 year, 2 months ago

    Hi @andreslav,

    Would you mind share the steps to replicate this, so I can try it on my end?

    Looking forward to hearing from you.

    Kind regards,
    Herman 😊

    Thread Starter andreslav

    (@andreslav)

    1 year, 2 months ago

    Hi @bsfherman,

    I have now found out that the problem is not always reproduced. Here it is, try to explore: link.

    Herman Asrori (BSF)

    (@bsfherman)

    1 year, 2 months ago

    Hi @andreslav,

    It would be helpful if you can share a video point out this.

    Kind regards,
    Herman 😊

    Thread Starter andreslav

    (@andreslav)

    1 year, 2 months ago

    Hi @bsfherman,

    Here: gif. The page scrolls up somewhere. Tested in Firefox and Edge.
    Did you manage to reproduce it?

    Herman Asrori (BSF)

    (@bsfherman)

    1 year, 2 months ago

    Hi @andreslav,

    So, instead of just open the tab on the right side, it also drags you to the top. Is that the problem?

    Anyway, how did you create the sections where the tabs stay on the left and the images on the right of the tabs? Third-party plugin? What is it? I will try to replicate it on my end. Your site is site protected now, so I can’t inspect.

    Kind regards,
    Herman 😊

    Thread Starter andreslav

    (@andreslav)

    1 year, 1 month ago

    I’m sorry for the delay.
    Yes, I closed the site…

    I found additional problem conditions: it is played if the “Tabs” are inside the “Row Layout”.

    The “kadence” blocks are used. Here is a ready-made minimal html fragment (preview):

    <!-- wp:kadence/column {"borderWidth":["","","",""],"uniqueID":"_6bd911-aa","borderStyle":[{"top":["","",""],"right":["","",""],"bottom":["","",""],"left":["","",""],"unit":"px"}]} -->
<div class="wp-block-kadence-column kadence-column_6bd911-aa"><div class="kt-inside-inner-col"><!-- wp:kadence/tabs {"uniqueID":"_640557-b8","layout":"vtabs"} -->
<div class="wp-block-kadence-tabs alignnone"><div class="kt-tabs-wrap kt-tabs-id_640557-b8 kt-tabs-has-3-tabs kt-active-tab-1 kt-tabs-layout-vtabs kt-tabs-tablet-layout-inherit kt-tabs-mobile-layout-inherit kt-tab-alignment-left "><ul class="kt-tabs-title-list"><li id="tab-tab1" class="kt-title-item kt-title-item-1 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-active"><a href="#tab-tab1" data-tab="1" class="kt-tab-title kt-tab-title-1 "><span class="kt-title-text">Tab 1</span></a></li><li id="tab-tab2" class="kt-title-item kt-title-item-2 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive"><a href="#tab-tab2" data-tab="2" class="kt-tab-title kt-tab-title-2 "><span class="kt-title-text">Tab 2</span></a></li><li id="tab-tab3" class="kt-title-item kt-title-item-3 kt-tabs-svg-show-always kt-tabs-icon-side-right kt-tab-title-inactive"><a href="#tab-tab3" data-tab="3" class="kt-tab-title kt-tab-title-3 "><span class="kt-title-text">Tab 3</span></a></li></ul><div class="kt-tabs-content-wrap"><!-- wp:kadence/tab {"uniqueID":"_517054-7a"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-1 kt-inner-tab_517054-7a"><div class="kt-tab-inner-content-inner"></div></div>
<!-- /wp:kadence/tab -->

<!-- wp:kadence/tab {"id":2,"uniqueID":"_feb35b-ac"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-2 kt-inner-tab_feb35b-ac"><div class="kt-tab-inner-content-inner"></div></div>
<!-- /wp:kadence/tab -->

<!-- wp:kadence/tab {"id":3,"uniqueID":"_dcd2dc-dd"} -->
<div class="wp-block-kadence-tab kt-tab-inner-content kt-inner-tab-3 kt-inner-tab_dcd2dc-dd"><div class="kt-tab-inner-content-inner"></div></div>
<!-- /wp:kadence/tab --></div></div></div>
<!-- /wp:kadence/tabs --></div></div>
<!-- /wp:kadence/column -->
    Herman Asrori (BSF)

    (@bsfherman)

    11 months, 1 week ago

    Hi @andreslav, sorry for the long delay.

    Are you still facing the same with the latest version of Astra, which currently is v4.1.4?

    Kind regards,
    Herman 😊

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘The conflict between the Astra theme and the Kadence block’ is closed to new replies.

Tags