Tab Section problem, doesnt show full content

Hey Mohamad,

Thank you for the inquiry.

Does it work correctly when you remove the loading=”lazy” attribute from the iframe element?

<iframe loading="lazy" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/2541798&color=%23ebce45&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true" width="100%" height="450" frameborder="no" scrolling="yes"></iframe>

It is possible that the height of the tab section is not calculated properly because the iframe only loads when the tab title is clicked.

Best regards,
Ismael

Hi,

Thank you for the info.

The tab section works well with static content or content with definite height. It has issues with element that dynamically changes on user interaction such as the masonry element and iframes loading content from external sources. To fix the issue with the pagination or the load more button, you may need to add this script in the functions.php file.

function ava_custom_script_tab_resize(){
	?>
	<script type="text/javascript">
        (function() {
           $('.av-masonry-load-more').on('click', function() {
            setTimeout( function() {
                $(window).trigger('av-content-el-height-changed');
            }, 1000);
           });
        })();
	</script>
	<?php
}
add_action('wp_footer', 'ava_custom_script_tab_resize');

And for the iframe issue, this might be needed.

 function ava_enqueue_custom_script_resize() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', "(function($){	
            var int = window.setInterval(function(){
                console.log('tick');
                $(window).trigger('resize');
                $(window).trigger('av-content-el-height-changed');
            }, 2000);

            $(window).on('load', function() {
                setTimeout( function() {
                    clearInterval(int);
                }, 1000 );  
            });
        })(jQuery);" );
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_enqueue_custom_script_resize', 9999);

Best regards,
Ismael

Hi,

Would you mind posting the login details in the private field? Please make sure that the Appearance > Editor panel is accessible so that we could edit the files and debug the issue properly.

Best regards,
Ismael

Hi,

We modified the script a bit and disabled the ava_custom_script_fix function. The tab section is now resizing when loading more posts or when it contains an iframe with the dynamic height.

Best regards,
Ismael

Hi,

you will realize that there is a huge blank space on top of this other tab

Try to set the Content height to the second option. The space is created because it forces the same height for all tabs. This option only works well if you know that the content will actually have the same height or if you don’t mind a little space on other tabs with shorter content.

Best regards,
Ismael

Hi,

We added the custom script that we recommended above and disabled the other custom script that is supposed to adjust the height of the tab section title. The function or script name is ava_custom_script_fix.

Best regards,
Ismael