fixes full width row of Visual Composer plugin with RTL view.

back to snippest | Comment | Share

/**
 * This function fixes full width row of Visual Composer plugin with RTL view.
 *
 * IMPORTANT NOTE: You should add this script after jquery.js and before js_composer_front.js
 *
 * @return void
 */
function greenbackend_vc_full_width_rtl_inline_script() {

    // Can't continue if the current view is not RTL.

	if( ! is_rtl() ) return; ?><script type="text/javascript">
    jQuery(document).ready(function(){
        function vc_row_full_width_rtl(event){
            var vcFullWidth = jQuery('[data-vc-full-width="true"]');

            jQuery.each(vcFullWidth, function(){
                jQuery(this)
                    .css('right', parseInt(jQuery(this).css('left'), 10))
                    .css('left', '');
            });
        }

        function vc_single_row_full_width_rtl(event, data){
            data.el.css('right', data.offset).css('left', 'auto');
        }

        jQuery(document).on('vc-full-width-row-single', vc_single_row_full_width_rtl);
        jQuery(window).on('load', vc_row_full_width_rtl);
    });
    </script><?php
}
add_action('wp_footer', 'greenbackend_vc_full_width_rtl_inline_script');

/**

* This function fixes full width row of Visual Composer plugin with RTL view.

* IMPORTANT NOTE: You should add this script after jquery.js and before js_composer_front.js

* @return void

function greenbackend_vc_full_width_rtl_inline_script() {

// Can't continue if the current view is not RTL.

if( ! is_rtl() ) return; ?><script type="text/javascript">

jQuery(document).ready(function(){

function vc_row_full_width_rtl(event){

var vcFullWidth = jQuery('[data-vc-full-width="true"]');

jQuery.each(vcFullWidth, function(){

jQuery(this)

.css('right', parseInt(jQuery(this).css('left'), 10))

.css('left', '');

});

}

function vc_single_row_full_width_rtl(event, data){

data.el.css('right', data.offset).css('left', 'auto');

}

jQuery(document).on('vc-full-width-row-single', vc_single_row_full_width_rtl);

jQuery(window).on('load', vc_row_full_width_rtl);

});

</script><?php

}

add_action('wp_footer', 'greenbackend_vc_full_width_rtl_inline_script');

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

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;

}