Field positioning: right align hebrew text

  • hatikva
    Asked on January 1, 2018 at 3:13 PM

    Is it possible to right align the labels and text fields for the hebrew translation of my form.  If you click on the link you'll that the english displays properly but the hebrew translation is jumbled.  Hebrew is written from Left to right so the text should be right aligned. 

    thanks!!!

  • aubreybourke
    Replied on January 1, 2018 at 4:16 PM

    You can use this CSS code.

    How-to-Inject-Custom-CSS-Codes

    .form-all {
    text-align: right;
    direction: rtl !important;
    unicode-bidi: bidi-override !important;
    }

    .form-line-column,
    .form-label-right,
    .form-radio-item {
    float:right;
    }

  • hatikva
    Replied on January 3, 2018 at 2:44 AM

    Thanks but that didn't solve the problem.  That also made the english right align.  I only need the Hebrew translation of the form to right align incl. labels.  Is it possible to do this.  On one of my other forms it worked( https://form.jotform.me/hatikva/transportation-request)

    I also need it to be fixed for these two forms:

    1. https://form.jotform.me/hatikva/ResponseCard

    2. https://form.jotform.me/hatikva/hatikva-families-application

    I hope to be creating many forms in English with Hebrew translation.  Is it possible to permanently adjust the jot form system to properly align Hebrew translations?

    Thanks so much. 

  • Nik_C
    Replied on January 3, 2018 at 4:09 AM

    The issue with CSS, that is used to adjust the labels to be right to left, is that it affects the field regardless of the language selected in the form.

    Meaning, as you noticed as well, it will align the fields even if they are in English.

    So, the only solution I see at this time is to have duplicate fields and then show them conditionally when each language is selected.

    So when English is selected all fields are shown normally in English, and when Hebrew is selected then only appropriate fields are shown, translated.

    Let us know if that could work for you and if you need any assistance.

    Thank you!

  • hatikva
    Replied on January 3, 2018 at 4:21 AM

    The problem with that is when i setup of those conditions and then show the form in Hebrew it shows both the fields with conditions and all the other fields that it automatically translates. And it doesn't solve the problem.  The label title is still not showing on the far right. 

    I submitted a previous question regarding this issue for another form in English with Hebrew translation and the support gave me some css code to input and it adjusted only the hebrew translation to be correctly formatted right alignment. I tried the same code in this form and it didn't work. Do you know what the difference is?

    Here is the form I need to right align the hebrew labels: https://form.jotform.me/hatikva/ResponseCard

    And here is the form that worked when I input the following code: https://form.jotform.me/hatikva/transportation-request

    Answered by Ardian_L 

    Please put this CSS Code in Custom Css area:

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

        float: right;

    }


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

        text-align: right;

    }

  • Nik_C
    Replied on January 3, 2018 at 4:48 AM

    You're actually right, I apologize.

    Here is what you have to do:

    1) Set the labels to be on top:

    1514972740screencast Screenshot 10

    2) Add the below CSS to your Custom CSS Field:

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

        float: right;

    }

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

        text-align: right;

    }

    .form-checkbox-item:not(#foo) label {

        margin-left: 23px!important;

    }

    You can check my test form here: https://form.jotform.com/80021456851956

    I had to increase the margin for radio buttons so it will look properly for Hebrew translation.

    Let us know how it worked.

    Thank you!

  • hatikva
    Replied on January 3, 2018 at 4:55 AM

    YES.  It's almost there. The "I am interested to be a..." the 5 options to select are still left aligned in Hebrew.

    Can the label be left aligned and the circles before each option by flipped so they are on the far right with the text following each option from right to left?

    Thanks so much

  • Ardian_L
    Replied on January 3, 2018 at 6:38 AM

    Can you please add this CSS Code as well:

    [dir="rtl"] .form-line {

        text-align: right !important;

    }


    [dir="rtl"] .form-label-top{

        text-align: right !important;

    }


    [dir="rtl"] .form-checkbox-item:not(#foo) label{

    float: right !important;

    text-indent: 0px !important;

    }

    Let us know if you have any other question.

  • hatikva
    Replied on January 3, 2018 at 10:00 AM

    You guys are an amazing support team.  Thank you.  

    This worked, just the circles to select the 5 options should be on the right side of the text instead of the left.

  • aubreybourke
    Replied on January 3, 2018 at 11:51 AM

    Please try adding this code to what you already have:

    [dir="rtl"] .form-checkbox-item:not(#foo) label{

        margin-right: 38px!important;

    }

    [dir="rtl"] .form-checkbox-item:not(#foo) label:before {

       left: 0px !important;

       right: 4px !important;

    }