Make the form RTL with CSS Code for Hebrew form

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;

      }

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:

Let us know if you need more help.

Perfect! Thank you very much.

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

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?

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

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:

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,

Thanks

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:

Looking forward for your response.