RTL Alignment of single choice options in Hebrew

I created a form based on the Demographics Survey template.

I added my own Gender question, "Gender 2". Options are "Male", "Female", "Rather Not Answer", and "Other". Looks beautiful, and works great on both phone and desktop.

However, I need the form to be in Hebrew. I set the form's language to Hebrew. Now, notice what happens:

The choice radio selection should be to the right of their textual representations, and aligned on the right of the screen, below the label ("מין", the translation for Gender".

And the "other" textual representation ("אחר") went wild altogether. For some reason, it's aligned at the centre of the screen?!?

Hello Avi,

Thanks for reaching out to Jotform Support. I'm sorry you're having difficulties with your form. Can you please try to inject the CSS code below to see if this would fix the RTL alignment of your form?

/* set the form direction rtl */

.form-all {

direction: rtl !important;

float: none!important;

text-align: right !important;

}



/* to align inputs & dropdown */

.form-label-top, .form-label-left, .form-label-right, .form-html,

.form-checkbox-item label, .form-radio-item label, .form-radio-other-input,

.form-textbox, .form-dropdown{

 text-align: right !important;

}



/* to align single & multipl choice */

.form-multiple-column .form-checkbox-item,

.form-multiple-column .form-radio-item,

.form-single-column .form-checkbox-item,

.form-single-column .form-radio-item {

  float: none !important;

  direction: rtl !important;

    text-align: right !important;

    padding-right : 5px !important;

    display : block;

}



/* to align single & multipl choice */

.form-sub-label {

    direction : rtl;

    text-align: right !important;

}



/* to align single & multipl choice */

.form-checkbox-item input:checked + label:after {



     position: absolute;

    direction: rtl !important;

    right: 5px !important;

    float: right;

}



/* to align single & multipl choice */

.form-checkbox-item label:before {



    position: relative;

    direction: rtl !important;

    display : inline-flex;

}



/* to align single & multipl choice */

.form-radio-item input:checked + label:after {

    position: absolute;

    direction: rtl !important;

    right: 7px !important;

    float: right;

}



/* to align single & multipl choice */

.form-radio-item label:before {



    position: relative;

    direction: rtl !important;

    display : inline-flex;

}



/* to align buttons */

.form-pagebreak{

  float: right;

}

Give it a try and let us know if you have any other questions.

Hi Richard,

Thank you so much for your answer. I'm embarrassed to confess I have injected the CSS before (in another form), but I forgot about it.

However, the CSS you provide is similar, but not identical, to the one in How to Align Your Forms to a Right-to-Left Direction? (jotform.com). Which should I use?

Avi

Hello Avi,

Kindly try using my colleague's code first. If you encounter any problems, do let us know.

Thank you.

Thank you, Cecile. Is Richard's code an updated version of that in the Jotform User Guide?

Hi Avi,

The user guide is updated, however, there are some elements and widgets that not are not covered there that we need to customize for your form. Please try the code indicated above and if it will not work, we will take a look on it further.

Hi Nina,

It's mostly working, especially after I've set Label Alignment to TOP

At first glance, two issues:

1. Lines break - width is not wide enough. This is especially apparent with Label Alignment set to Right, as this forces the bullets to be right-aligned to the left side of the label. See images below. Notice that with the second image (Label Top) the problem still exists, but only in a few lines
2. The "Spread to Columns" feature option does not work.

Above: Label Right

Below: Label Top

Hello avinahir,

Please try using this code instead:

.form-all {

 border: 10px solid;

 border-image-slice: 1;

 border-width: 5px;

 border-image-source: linear-gradient(to left, #743ad5, #6ab7f2);

}

/* Hebrew 2022-08-16 From Support */

/* set the form direction rtl */

.form-all {

direction: rtl !important;

float: none!important;

text-align: right !important;

}

/* to align inputs & dropdown */

.form-label-top, .form-label-left, .form-label-right, .form-html,

.form-checkbox-item label, .form-radio-item label, .form-radio-other-input,

.form-textbox, .form-dropdown{

 text-align: right !important;

}

/* to align single & multipl choice */

.form-multiple-column .form-checkbox-item,

.form-multiple-column .form-radio-item,

.form-single-column .form-checkbox-item,

.form-single-column .form-radio-item {

 float: none;

 direction: rtl !important;

  text-align: right !important;

  padding-right : 5px !important;

  display : block;

}

/* to align single & multipl choice */

.form-sub-label {

  direction : rtl;

  text-align: right !important;

}

/* to align single & multipl choice */

.form-checkbox-item input:checked + label:after {

   position: absolute;

  direction: rtl !important;

  right: 5px !important;

  float: right;

}

/* to align single & multipl choice */

.form-checkbox-item label:before {

  position: relative;

  direction: rtl !important;

  display : inline-flex;

}

/* to align single & multipl choice */

.form-radio-item input:checked + label:after {

  position: absolute;

  direction: rtl !important;

  right: 7px !important;

  float: right;

}

/* to align single & multipl choice */

.form-radio-item label:before {

  position: relative;

  direction: rtl !important;

  display : inline-flex;

}

/* to align buttons */

.form-pagebreak{

 float: right;

}

.form-label.form-label-auto {

   display: block;

   float: none;

   text-align: left;

   width: 100%;

   }

/*fix spread to column and line breaks*/

[data-columncount] .form-radio-item{

 float:left!important;

}

[data-columncount] .form-radio-item label{

 padding:0;

}

It will work with spread to column and will also fix the linebreak issue, as can be seen in this demo form:

Thank you so much - it's working great.

Two problems, however. I don't believe the first can be solved, and both are not show stoppers.

The first is about the order of the options in columns. Take a look at the three screenshots: design, desktop preview, and mobile preview (I've modified the labels to numbers to indicate the order of the options):

The mobile preview is OK - the labels are displayed in the correct order, one below the other. However, in the desktop preview, the order should have been right-to-left, top-to-bottom. Instead, the numbers in each row are reversed.

The second problem is that in the mobile preview the heading ("באיזה שלב את.ה בלימודים?") is aligned to the left, not to the right.

Anyhow, great support!

Hello avinahir,

Thanks for getting back to us. To confirm, do you want the Single choice element on a single column only? If so, you can disable the Spread to Columns option on the field settings.

Then, add the code below to your existing codes to align the the field heading to RTL on mobile devices:

@media screen and (max-width: 480px){

label.form-label.form-label-auto, label.form-label:not(.form-label-top),

.form-textbox, .form-textarea, .form-dropdown {

 text-align: right !important;

 direction:rtl;

}

}

Here is the result:

Give it a try and let us know if you have any other questions.

Hello Richard

Thank you for the CSS - it worked.

About the single choice element - sorry I was not clear enough. With the Single-Choice element, I don't want a single column only. I want multiple columns but placed in the correct order.

Please look at the following two images: Design and Desktop-Preview of a single choice element.

In the Design image above, at the right pane (dark grey) you can see the correct order of the options: 1, 2, 3, 4... and 7 (for clarity I've used numbers here).

In the Desktop Preview image below, you can see that the options are correctly aligned to the right, with the radio buttons to the right of the labels.

However, the options are organized left-to-right, top-to-bottom. 1 is to the left of 2, 3 is to the left of 4. A Hebrew reader would expect them to be read from the right-to-left, top-to-button and 1 should appear to the right of 2, 3 to the right of 4...

HTH

Avi

Hi avinahir,

Thanks for getting back to us. You can try to replace the code on line 83 from left to right with this code:

[data-columncount] .form-radio-item{

float:left!important;

}

Give it a try and let us know how it goes.

Sorry, Eiron, I don't get it. The code you've asked me to replace is identical to the replacement code - even on your image!

Avi

Hi avinahir,

I understand the issue, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

Hello avinahir,

Thanks for patiently waiting. Please try adding this code to the form: 

.form-multiple-column{

display: flex;

flex-wrap: wrap;

}

Here's the demo form.

Give it a try and let us know if you need any other help.