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

visual-composer-rtl-fix.js

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();

});

Hello,
where i can use the above codes to fix the row issue in RTL?

Hi @samyar

You have to add that code into your theme.

don't forget to put it i inside <script></script> tag.

While use this code not working Left to Right

WOOOWWWWW
Thanks alot.... I was looking for answer for 2 weeks. Thanks mannnnnn. You can't imagine how much i am happy now. Thanks.
I hope the best for you !!!!!

Thank's :)

@arsalanzr @imatteh awesome to know it helped you :)

@shafi796 You have to check your current active plugins. a plugin conflict can be the reason!

Hi @aliaghdam
Thank u for your help. I don't what happened but lately The code is not working on safari any more (Chrome and firefox is ok still). I don't know what to do. I don't know it is because of Visual composer update 5.3 or it is because of safari. Do know any thing about this?
I would be grateful if you help me on this :(.

U can see the issue on this page: https://nicvo.com

Best Regards
Arsalan

@arsalanzr I checked your site and it works properly!!

dadash damet garm harf nadari

Hi, can you please let me know which file in wordpress install should i add this code? If i use a child theme can i update the child theme?

wonderful. thank you so much :)

[css]
body.rtl .vc_row[data-vc-full-width] {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100%;
width: 100vw !important;
}

Thank serguk89! Your solution worked with my project.

How to use this code in my template?
Where do I put Js file?

@serguk89
I use your code in my theme but row is very strech .
help me.

Worked perfectly! Thanks @aliaghdam!

thanks ;)

CSS Solution:

body.rtl .vc_row[data-vc-full-width] {
	position: relative;
	width: 100vw !important;
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%) !important;
    padding-left: calc( (100vw - 1140px) / 2 ) !important;
    padding-right: calc( (100vw - 1140px) / 2 ) !important;
}
@media(max-width:767px){
	body.rtl .vc_row[data-vc-full-width] {
	    padding-left: 15px !important;
	    padding-right: 15px !important;
	    margin-right: 0 !important;
	    margin-left: 0 !important;
	}
}

I hope it help

thank you so so so much , thank you !! thank you , you saved me <3 <3 <3

Worked like a charm!

@serguk89
Thanks

Well, thank you all so much. this helped me a lot 👍
but, I had to tweak it a little bit.

I did it as a separate class on each row needed a fix. and I used 2 classes.

.fixRtl { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100%; width: 100vw !important; padding-left: calc( (100vw - 1140px) / 2 ) !important; padding-right: calc( (100vw - 1140px) / 2 ) !important; }

and the other one was:

.fixRtlTwo { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100%; width: 100vw !important; }

the reason was, some rows only worked with the first class & some worked with the second one, plus for some reason, it did affect the English rows when I made them in theme-wide.

This is what I have
WordPress - version 5.0.2
Xstore Theme - 5.1.3 (child 1.0)
Polylang - Version 2.5
WPBakery Page Builder - Version 5.5.2

Thank you very much

Thank you so much

dear friend
thank you for fixing this problem
do me a favor and please tell us to which file this script has to be added exactly

@serguk89 Thank you for the code. It finally working!
@WWGate Thank you for media CSS, working.

I am using WordPress 5.3.2 and WPBakery Page Builder 6.1.0, on Nginx (LEMP) with PHP 7.3 including plugins W3 Total Cache (page, browser, object, database + cloudflare setup) & Autooptimize (JS, HTML, CSS) and and CloudFlare Free Plan.

Do not know why it stopped working after upgrading WPBakery to the latest one, also switching on the better server -.-

Thanks again, solved my problem after a research and going crazy about it :D

Hello
i tryed to improve this code

function bs_fix_vc_full_width_row() {
        if(jQuery('[data-vc-full-width="true"]:first').css( 'left' ) == 'auto') return;
        let rightAuto = jQuery('[data-vc-full-width="true"]:first').css( 'right' ) == 'auto' ;
        if( jQuery('html').attr('dir') == 'rtl' && !rightAuto){
            jQuery('[data-vc-full-width="true"]').each( function(i,v){
                jQuery(this).css('right' , jQuery(this).css('left') ).css( 'left' , 'auto');
            });
        }
    }

Hello
Only this code worked for me correctly

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('left', $el.css('right')).css('right', 'auto');
	 });
 }

You're the best @aliaghdam , saved my project.