Right to left direction settings

  • hlalexeyh
    Asked 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)

    1603444382 5f929e9e4ee76  Screenshot 10

    1603443347 5f929a9320590  Screenshot 21

  • Sam_G
    Replied 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.

  • hlalexeyh
    Replied on October 26, 2020 at 2:15 PM

    I added it

    doesn't work

  • Elton Support Team Lead
    Replied 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:

    10272020 WHzPePygVb Screenshot 10

    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.

    10272020 gNgTXfvOKu Screenshot 21