Wordpress visual composer RTL on window resize

Question

As continue to this post: Wordpress Visual Composer Strech Row and Direction RTL

This jQuery solution is great for window load:

    jQuery(window).load(function () {
    if (jQuery('html').attr('dir') == 'rtl') {
        jQuery('[data-vc-full-width="true"]').each(function (i, v) {
            jQuery(this).css('right', jQuery(this).css('left')).css('left', 'auto');
        });
    }
});

But how we can strech the row for full-width on window resize?

Answer 1

If you want to fix VC Row on window resize and window load use this solution:

$(window).on( 'resize', function() {
    $( '.rtl [data-vc-full-width="true"]' ).each( function(){
        $( this ).css( 'right' , $( this ).css( 'left' ) ).css( 'left' , 'auto' );
    });
}).resize();

Answer 2

For better result, use vc-full-width-row jQuery custom event type and put your code into event handler callback function instead.

jQuery(document).on('vc-full-width-row', function($element) {

    jQuery('.rtl [data-vc-full-width="true"]').each( function(i,v) {

        var left = jQuery(this).css('left'),
            right = jQuery(this).css('right'),
            padding_left =  jQuery(this).css('padding-left'),
            padding_right =  jQuery(this).css('padding-right');

        jQuery(this).
        css('right', left ).
        css('left',  right ).
        css('padding-left', padding_right ).
        css('padding-right', padding_left );
    });

});