Field positioning: right align hebrew text

  • Profile Image
    hatikva
    Asked on January 01, 2018 at 03: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!!!

  • Profile Image
    aubreybourke
    Answered on January 01, 2018 at 04: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;
    }

  • Profile Image
    hatikva
    Answered on January 03, 2018 at 02: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. 

  • Profile Image
    Nik_C
    Answered on January 03, 2018 at 04: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!

  • Profile Image
    hatikva
    Answered on January 03, 2018 at 04: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;

    }

  • Profile Image
    Nik_C
    Answered on January 03, 2018 at 04:48 AM

    You're actually right, I apologize.

    Here is what you have to do:

    1) Set the labels to be on top:

    1514972740screencast.gif

    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!

  • Profile Image
    hatikva
    Answered on January 03, 2018 at 04: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

  • Profile Image
    Ardian_L
    Answered on January 03, 2018 at 06: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.

  • Profile Image
    hatikva
    Answered on January 03, 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.

  • Profile Image
    aubreybourke
    Answered on January 03, 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;

    }