Multilanguage Form>>RTL: Ability to change the Form fields from Right to Left when Arabic/Hebrew is selected

  • Profile Image
    stratis63
    Asked on February 10, 2020 at 01:28 PM

    fixed the arabic but label alignment in the arabic only should be right aligned of the form....

    here  everything is left.

  • Profile Image
    VincentJay
    Answered on February 10, 2020 at 04:50 PM

    Please finish your form in Arabic and we will provide you a custom CSS code to align it to the right. 

    As of checking, your form is in English. We'll wait for your reply.

  • Profile Image
    stratis63
    Answered on February 10, 2020 at 05:50 PM
    the form has a translation in Arabic already but the labels in the arabic
    form show show form right to left.
    ...
  • Profile Image
    VincentJay
    Answered on February 10, 2020 at 10:06 PM

    Hi,

    Please add this custom CSS code to your form: 

    .form-label-left, .form-label-right, .form-label-left.form-label-auto, .form-label-right.form-label-auto {

    text-align: right !important;

    }

    To add custom CSS code to your form, please follow this guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


  • Profile Image
    stratis63
    Answered on February 11, 2020 at 02:50 AM
    Ι do not think it works
    Please note I have an English form where the fileds are
    NAME { type your Name) aligned on the left
    When i switch to Arabic it should be
    ( } NAME (in arabic) the labels of the form either stay on 1 side
    or on the other....
    its wrong they have to be left aligned in english and right aligned on the
    arabic.
    https://eu.jotform.com/build/200334222227036
    ...
  • Profile Image
    roneet
    Answered on February 11, 2020 at 07:12 AM

    On further testing I have noticed that if you align the Form labels on top then on injecting the following CSS it would align the fields from RTL when the Arabic language is selected:

    [dir="rtl"] ul.form-section.page-section {

        float: right!important;
        text-align: right!important;

    }
    [dir="rtl"] .form-label.form-label-auto {

        text-align: right!important;


    }

    I have added the above code in your Form.

    Result:

    1581423038888888888.gif

    Also, I have opened a feature request to align the fields from RTL if the Arabic/Hebrew language is selected.

    Hope this helps!

    Thanks.