Support » Plugin: Kadence Blocks – Gutenberg Page Builder Toolkit » Is there a way to add smoothing to the tabs content area?

  • I’m trying to get the tabs content appear smoothly, or via a slide in from the bottom. Currently I’m just trying to use transparency, but somehow this is not working. (but the way, I also made the tabs stretch and equal width):

    .kt-title-item {
        flex-grow:1;
        flex-basis: 0;
        margin-right:20px !important;
    }
    
    .kt-title-item:last-child {
         margin-right:0;
    }
    
    .kt-tab-inner-content {
        -moz-transition:  0.4s ease-in-out;
        -o-transition:  0.4s ease-in-out;
        -webkit-transition:  0.4s ease-in-out;
        transition:  0.4s ease-in-out;
    }
Viewing 7 replies - 1 through 7 (of 7 total)
  • It could be possible, but I need to see your settings to get you the correct code, would look like this:

    .kt-tabs-wrap .wp-block-kadence-tab[role="tabpanel"] {
        display: block;
        visibility: hidden;
        height: 0;
        padding: 0;
        border-width: 0 !important;
    }
    .kt-tabs-wrap .wp-block-kadence-tab .kt-tab-inner-content-inner  {
        opacity:0;
        transform: translateY(50px);
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    }
    .kt-tabs-wrap.kt-active-tab-1>.kt-tabs-content-wrap>.kt-inner-tab-1,
    .kt-tabs-wrap.kt-active-tab-2>.kt-tabs-content-wrap>.kt-inner-tab-2,
    .kt-tabs-wrap.kt-active-tab-3>.kt-tabs-content-wrap>.kt-inner-tab-3,
    .kt-tabs-wrap.kt-active-tab-4>.kt-tabs-content-wrap>.kt-inner-tab-4,
    .kt-tabs-wrap.kt-active-tab-5>.kt-tabs-content-wrap>.kt-inner-tab-5,
    .kt-tabs-wrap.kt-active-tab-8>.kt-tabs-content-wrap>.kt-inner-tab-6 {
        visibility: visible;
        height: auto;
        padding:20px;
        border-width: 1px 1px 1px 1px !important;
    }
    .kt-tabs-wrap.kt-active-tab-1>.kt-tabs-content-wrap>.kt-inner-tab-1 .kt-tab-inner-content-inner,
    .kt-tabs-wrap.kt-active-tab-2>.kt-tabs-content-wrap>.kt-inner-tab-2 .kt-tab-inner-content-inner,
    .kt-tabs-wrap.kt-active-tab-3>.kt-tabs-content-wrap>.kt-inner-tab-3 .kt-tab-inner-content-inner,
    .kt-tabs-wrap.kt-active-tab-4>.kt-tabs-content-wrap>.kt-inner-tab-4 .kt-tab-inner-content-inner,
    .kt-tabs-wrap.kt-active-tab-5>.kt-tabs-content-wrap>.kt-inner-tab-5 .kt-tab-inner-content-inner,
    .kt-tabs-wrap.kt-active-tab-8>.kt-tabs-content-wrap>.kt-inner-tab-6 .kt-tab-inner-content-inner {
    transform: translateY(0px);
    opacity:1;
    }

    If you can post a link I can get that closer.

    Ben

    Hey Ben, that works very well! Thank you!
    I’m working on it on a local installation, and with the items stretched within the available width it now looks very cool.

    This is the test now: http://pix.toile-libre.org/upload/original/1562167238.jpg

    By the way, perhaps it would be an idea to make the position of the icons global instead of setting each icon position seperately.

    I just noticed that it is also working very well in the accordion mode I chose for mobile display, but when clicking on another accordion tab, the other ones stay open. Could these be closed and only keep the last one open?

    That left open because of usability on mobile devices. If the accordion closes it causes the height of the screen to change, moving the viewport in a jarring way. The most natural experience is having each open that you click to view when on mobile and viewing through accordion.

    I’ll look at adding in an option to force the close just for the few that prefer it.

    Ben

    Because with each tab you have to choose to add an icon (you can have some without icons in the mix) it seemed to make more sense to choose that on a tab by tab basis, but perhaps a change for all setting could be added as well.

    You replied ‘The most natural experience is having each open…’
    Yes, that makes sense. So forget about it and leave it as it is :).

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.