-
shniksAsked on June 19, 2019 at 2:42 AM
Hi
I added a CSS code to enable steady RTL alignment of my form (Hebrew).
Every time I open the link, the boxes are scrumbled in the screen, not keeping the RTL alignment.
What can I do to keep it steady?
Page URL: https://form.jotform.me/91631299039463 -
jonathanReplied on June 19, 2019 at 3:52 AM
We apologize for the inconvenience caused. I was able to reproduced the problem also when I test on your form. The RTL mode work temporarily in Preview mode while in the Form Builder, but if you test on another browser tab, the RTL is gone again.
Please allow me some more time to investigate and figure out the correct CSS codes needed to fix the issue. I will get back to this shortly.
-
jonathanReplied on June 19, 2019 at 4:17 AM
I have fixed the CSS codes needed, and the RTL mode appears to be working correctly now on your form.
Can you please test/check also on your side. Let us know if it still did not work.
-
shniksReplied on June 19, 2019 at 4:28 AM
Works like magic!
Thank you very much for your quick response.
By the way, I need to add more elements, do I need to touch the code?
-
denis_calin Jotform SupportReplied on June 19, 2019 at 4:36 AM
You are very welcome @shniks!
There is no need to adjust the code if you would like to add more elements, the code works for all elements added to the form.
-
shniksReplied on June 19, 2019 at 8:26 AM
Hi,
I'm almost finished with the form but when I open it on my mobile it doesn't look fit, the form is bigger than the screen.
I also noticed that the hours input field is LTR - can you RTL it?
I don't know how to fix it.
Much appriciate!
Lior
-
zuritapiaReplied on June 19, 2019 at 9:53 AM
Can you please provide a screenshot of the way the form looks on mobile, in order for us to further look into the issue?
As for the CSS code for the Hours Field, can you try to add this CSS Code:
<label class="rtl" id="label_12" for="input_12_hourSelect">
-
shniksReplied on June 20, 2019 at 12:20 AM
Hi
I've added the snippet, can't see a change.
Here's a screenshot of my mobile.
Thanks!!
-
zuritapiaReplied on June 20, 2019 at 2:56 AM
Go ahead and remove the CSS code I provided earlier and inject this CSS Code please:
@media only screen {
#cid_12 {
float: right;
direction:rtl!important;
unicode-bidi : bidi-override !important;
}
}