Whenever I attempt to expand a row using the row settings in Visual Composer, the row stretches but the alignment of the row becomes completely off. This issue only occurs when the body direction is set to direction:rtl in the CSS.
You can view the website online at:
Is there a solution to correct this problem?
Sincerely, Yuval. https://i.sstatic.net/wrcXv.png
Greetings Yuval!
Here is a script that may assist you in resolving your issue.
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');
});
}Insert this script code within jQuery(window).load.
I hope this solution proves helpful to you :)
Resolving this issue with CSS might be a simpler solution, especially since it will adjust automatically when the page is resized. Look for a class for the row before [data-vc-full-width="true"] and add the following CSS to your rtl.css file:
.before-fullwidth-row {
direction: ltr;
}
.before-fullwidth-row > div {
direction: rtl;
}
It appears to be working...
To ensure that VC Row stays fixed even when the window is resized, you can implement this effective solution:
$(window).on('resize', function() {
$('.rtl [data-vc-full-width="true"]').each(function(){
$(this).css('right', $(this).css('left')).css('left', 'auto');
});
}).resize();
Fixing WordPress Visual Composer full width row (stretch row) for RTL
jQuery(document).ready(function() {
function fixVCFullWidthRow(){
var $elements = jQuery('[data-vc-full-width="true"]');
jQuery.each($elements, function () {
var $el = jQuery(this);
$el.css('right', $el.css('left')).css('left', '');
});
}
// Correcting rows in RTL
jQuery(document).on('vc-full-width-row', function () {
fixVCFullWidthRow();
});
// Executing once due to firing issues in Mac/Firefox and Windows/Edge at times
fixVCFullWidthRow();
});
I have created a codesandbox to demonstrate my issue: codesandbox example watcher not triggering. Currently, I am developing a component that depends on an object with dynamically added data. In a separate .js file, I export the following object: export d ...
Is it possible to customize the color of the print and echo text on your HTML page, rather than having it just in black? Thank you. ...
I am working on an Angular 9 application where I want to implement the functionality of copying the URL to clipboard when clicked. Currently, I have the following code: The issue I am facing is that it only copies the URL on the second attempt and then st ...
I want to create a DropDownList using @Html.DropDownList and connect it with AngularJS. Below is the code snippet: @Html.DropDownList("LessonID", (SelectList)ViewBag.LessonList, "choose one", new { ng_model = "LessonID" }) Here's an example of ...
I want to create a nice slide-in effect for my sidebar when the user loads the page. My goal is to toggle the state of the Sidebar component from open: false to open: true on load in order to achieve this effect. Unfortunately, it seems that the way I&apo ...
Currently, my website is built using Bootstrap, JQuery, HTML, and CSS. I am looking to enhance the user experience by incorporating a modal output feature. The idea is that when a user clicks on a specific hyperlink, a modal window will open displaying t ...
In my Django project, I have a Students model with various fields. I created a ModelChoiceField form allowing users to select a record from the Students table via a dropdown. forms.py: class StudentChoiceField(forms.Form): students = forms.ModelChoic ...
I am looking to incorporate auto play functionality for a YouTube video on my video style page, which can be found at . Currently, I am able to trigger the video to auto play by clicking on an image thumbnail using the code below. However, I am encounterin ...
In my PHP page, I have a JavaScript function that includes a JSON method for retrieving data from the database. The code snippet looks like this: $this->registerJsFile('/js/restaurant-reserve.js', ['depends' => [JqueryAsset::class ...
I've been grappling with a webpage I'm designing, featuring sentences acting as links arranged in inline-block format. My goal is to create an animated effect that resembles twinkling stars, pausing the animation on hover. It feels like I'm ...
I am in the process of developing a video call application similar to Google Meet or Zoom, incorporating object detection using Python Flask or Django. Here is how the application functions: Users can join a channel for the video call The camera ini ...
Issue encountered as nothing I attempted seemed to be effective. Tried my own script, experimented with various solutions found on Google, but alas, nothing worked. The closest success I achieved was receiving empty emails from the latest version. Any insi ...
Currently, I am on a quest to gather the URL for the thumbnail of a Sketchfab model. To access this information, you can visit: Upon visiting the above URL, all the necessary details are visible to me. My next step involves making an AJAX call to dynami ...
I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...
I am facing a challenge in passing data from Child A component to Parent, and then from the Parent to Child B using props. In my project using nuxt.js, I have the following structure: layouts/default.vue The default template loads multiple components wh ...
Retrieve all checkbox values dynamically import * as React from "react"; import Checkbox from "@mui/material/Checkbox"; import FormControlLabel from "@mui/material/FormControlLabel"; import axios from "axios"; expor ...
Currently, I am developing a Vue page with a checkbox that needs to read a value from a cookie upon mounting. However, I have observed that in the Edge browser, the checkbox does not get set correctly even though the Mounted function is definitely being ca ...
I am currently working on a code for an ajax live search feature and need some help with getting results to display $(document).ready(function() { $("#search").keyup(function() { var query = $(this).val(); if (query != "" && query.leng ...
I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...
How can I create a single-line CSS layout that flows to the right endlessly, with each box occupying a set percentage of the viewport width (e.g. 20%)? To better illustrate, refer to the following diagram: +-----------------------------+ |VIEWPORT ...