Make the form RTL with CSS Code for Hebrew form

  • Profile Image
    ofir_gilad
    Asked on August 13, 2020 at 11:53 AM

    Hi all,

    I tried to read about it in your support forum. at the moment I still have few problems so lets solve it one by one :)

    The topic of the Field are still on the left side (even when I choose right) so the field are ok, the question mark are in RTL style but the topic itself is on the left.

    I used the following CSS:

    .form-all {

    direction: rtl !important;

    }

    .form-label-left {

    float: right;

    }

    .form-label.form-label-auto {

            display: inline-block;

            float: left;

            text-align: right;

          }

  • Profile Image
    BDAVID
    Answered on August 13, 2020 at 01:27 PM

    Hi, I assume that you are referring to this form, where that code has not taken any effect: https://www.jotform.com/form/202186006122037

    Please try injecting this code instead: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-all {

      direction: rtl !important;

    }

    .form-line-column, .form-label-right, .form-radio-item { 

      float: right !important;

    }

    .form-label.form-label-auto {

      text-align: right !important;

      direction: rtl !important;

    }

    .form-sub-label {

      direction: rtl;

    }

    Result:

    1597339586RTL.png

    Let us know if you need more help.

  • Profile Image
    ofir_gilad
    Answered on August 13, 2020 at 03:31 PM

    Perfect! Thank you very much.


    Is there any solution I can implement regarding Cards View or PDF forms template? 

  • Profile Image
    ofir_gilad
    Answered on August 13, 2020 at 04:14 PM
  • Profile Image
    ofir_gilad
    Answered on August 13, 2020 at 05:09 PM

    Another question, I added a widget and i see I need to put there it's own CSS. i tried to paste the same css above but it doesn't work. Do I need another CSS for widget? could you help?

  • Profile Image
    ofir_gilad
    Answered on August 13, 2020 at 05:14 PM

    Also the Multiple Choice (basic element) is not working RTL. 

  • Profile Image
    BDAVID
    Answered on August 13, 2020 at 06:34 PM

    Hi, it will not be possible to make RTL forms that uses the Cards layout, since that layout does not allow CSS code injection. So, you may switch the layout to the Classic one if you need to make it RTL: https://www.jotform.com/help/493-How-to-Change-the-Form-Layout

    Which widget did you add? Please share a screenshot: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

    The widgets require injecting CSS code in their own CSS code area: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

    It seems like you changed the theme, please go to the properties of one of the fields, and change the Label Alignment and set it as a form default:

    1597358046default.png

  • Profile Image
    ofir_gilad
    Answered on August 14, 2020 at 04:55 AM

    Hi, Thanks.


    1. When i use the CSS RTL code the Basic Multiple Choice is still LTR, it is the only basic at the moment who didn't change to RTL.

    2. I would like that the Single Choice will be line after line. at the moment I see it in one row (With the CSS RTL Code) I attached 2 screenshots about how I see it (One next to the other) and how I would like it to be (Line after Line).


    I guess there is something you should add in the RTL CSS that you sent me which is working good for other think.


    Would appreciate help,

    Thanks1597395242Signle Choice.JPG1597395275Signle Choice current with RTL

    1597395153Basic Multiple Choice.JPG

  • Profile Image
    Jed_C
    Answered on August 14, 2020 at 07:44 AM

    I'm unable to find the radio button in your sample screenshot. As for the checkbox and radio alignment, try adding the code below to align the fields to the right together with the radio and checkbox item.

    .form-checkbox-item:not(#foo) input:checked + label:after {

        margin-left: 150px;

    }

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

        margin-left: 150px;

    }

    .form-radio-item:not(#foo) input:checked + label:after {

        margin-left: 150px;

    }

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

        margin-left: 150px;

    }

    Sample Output:

    1597405412The Easiest Online Form Builde

    Looking forward for your response.