-
hlalexeyhAsked on October 23, 2020 at 5:17 AM
Hi , you have created a big and very good platform, well done!!!
Iam going to use your system permanently, but now iam trying to set some test forms and fund some issues :
in hebrew status I have put this code recommended by you for rtl languages
.form-all {direction: rtl; text-align: right; } .form-radio-item:not(#foo) label:before, .form-checkbox-item:not(#foo) label:before {right: 0; margin-right: 0; float: right; } .form-radio-item:not(#foo) label:after {right: 4px; } .form-checkbox-item:not(#foo) label:after{right: 8px; } .form-checkbox-item:not(#foo) label {float: right; } .form-all .form-section .form-col-2 {width: 33.3% !important; } .form-label {text-align: right !important; } span.phone-separate {display: none; } .form-line-error .form-error-message {right: unset !important;left: 0 !important;text-align: left;}
But it still show left-to-right direction in some cases like:
- widget: autocomplete text field
- and all fields shown up left-to-right dir on mobile screens (I haven't access to @media to set it)
Page URL: https://form.jotform.com/202962237868466 -
Sam_GReplied on October 23, 2020 at 8:55 AM
Hi Hlalexeyh,
Thank you for contacting Support.
Kindly add this CSS code:
.form-line-column:not(.fixed-width) .form-dropdown, .form-line-column:not(.fixed-width) .form-textarea, .form-line-column:not(.fixed-width) .form-textbox, .form-line:not(.fixed-width) .form-textarea {
direction: rtl;
text-align: right;
}
.form-line:not(.fixed-width) .form-dropdown, .form-line:not(.fixed-width) .form-spinner, .form-line:not(.fixed-width) .form-textare, .form-line:not(.fixed-width) .form-textbox:not(.time-dropdown), .form-line:not(.fixed-width) .signature-pad-passive {
direction: rtl;
text-align: right;
}
Guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes
I hope this helps.
Let us know if you need further assistance.
-
hlalexeyhReplied on October 26, 2020 at 2:15 PM
I added it
doesn't work
-
Elton Support Team LeadReplied on October 26, 2020 at 6:55 PM
To fix the RTL direction on mobile, inject this CSS code into your form.
@media screen and (max-width: 480px){
label.form-label.form-label-auto, label.form-label:not(.form-label-top),
.form-textbox, .form-textarea, .form-dropdown {
text-align: right !important;
direction:rtl;
}
}
Guide: How to Inject Custom CSS Codes
Result:
Regarding the autocomplete, I wasn't able to find a solution as of the moment since there's no visible HTML tag in the source code when the list appears but I'll check again later and inform you here.