Ahmad Naser Turnkey Ecosystem Ahmad Naser
September 6, 2018

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

Published in the Ahmad Naser ecosystem. Estimated reading time: 1 minute.

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

Leave a Reply

Your email address will not be published. Required fields are marked *