Right to left direction settings

  • Profile Image
    hlalexeyh
    Asked on October 23, 2020 at 05: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_

    1603443347_5f929a9320590_

  • Profile Image
    Sam_G
    Answered on October 23, 2020 at 08: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.

  • Profile Image
    hlalexeyh
    Answered on October 26, 2020 at 02:15 PM

    I added it

    doesn't work

  • Profile Image
    EltonCris
    Answered on October 26, 2020 at 06: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.png

    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.png