Wordpress Visual Composer Strech Row and Direction RTL

Question

When I try to strech row in the row settings in Visual Composer, the row streches, but the position of the row is all wrong. It happens only when body direction has direction:rtl css setting.

Website is online: http://ono.devurl.net/?page_id=871

Any way of fixing that?

Yuval.

Answer 1

Yuval Hey !

Try this script to fix your problem.

    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');
        });
    }

Put this script code in jQuery(window).load.

hope this'll help you :)

Answer 2

Could be easier to resolve it with css, and it will work when page is resized too. Find a class for row before [data-vc-full-width="true"] and add such css to your rtl.css

.before-fullwidth-row {
    direction: ltr;
}
.before-fullwidth-row > div {
    direction: rtl;
}

Seems to work...

Answer 3

If you want to fix VC Row also on window resize 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 4

WordPress Visual Composer full width row ( stretche row ) fix for RTL

jQuery(document).ready(function() {

function bs_fix_vc_full_width_row(){
    var $elements = jQuery('[data-vc-full-width="true"]');
    jQuery.each($elements, function () {
        var $el = jQuery(this);
        $el.css('right', $el.css('left')).css('left', '');
    });
}

// Fixes rows in RTL
jQuery(document).on('vc-full-width-row', function () {
    bs_fix_vc_full_width_row();
});

// Run one time because it was not firing in Mac/Firefox and Windows/Edge some times
bs_fix_vc_full_width_row();
});

Source