RTL Form: Scale rating has uneven spacing and labels are not in the right places

The scale renders in an unblanaced way and the substitles are not in the right places

Hi PD2023,

Thanks for reaching out to Jotform Support. I'm sorry you're having trouble with this. I understand the issue, but I'll need a bit of time to look into this. I will be back shortly.

Hi PD2023,

Thanks for patiently waiting. I see you deleted your most recent form. Can you please point us to the form you're working on now? I checked the remaining forms on your account but none of them seems to match the fields on your screenshot.

After we hear back from you, we'll be able to help you with this.

Hi Sonnyfer,

You can see all problems here: https://form.jotform.com/232695883483472

1. Scale question:
2. Unevenly spaced options
3. Legend for minimal and maximal answers don't appear below them as they do in English
4. Dropdown question - radio button to left of text rather than to the right as it should be in Hebrew

Thanks,

Doron

Hi Doron,

Thanks for getting back to us. I understand you are having issues with the Scale Rating field and the Single Choice field. This can be fixed by adding custom CSS to your form. Check out the steps and screencast below to see how it's done:

• Open your form in Form Builder and click on the blue Paint Roller icon on the right side of the screen.
• Under the Styles tab, paste the code below into the Inject Custom CSS area.

/*Thread - 5580721*/

/*For the Scale Rating field*/

.rating-item:last-child {

    margin-right: 24px !important;

}



span.rating-item-title.for-to {

    text-align-last: left;

}



span.rating-item-title.for-from {

    text-align-last: right;

}



/* to align single choice */

.form-checkbox-item label:before {

  position: relative;

  direction: rtl !important;

  display : inline-flex;

}



/* to align single choice */

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

  position: absolute;

  direction: rtl !important;

  right: 7px !important;

  float: right;

}



/* to align single 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%;

   }

/*Thread - 5580721 - Ends here*/

• Click on Save, and you're done.

Here's what the result will look like:

Here's the cloned version of the form that you can test.

Please give it a try and let us know how it goes. 

Hi Afzal,

Thanks for the CSS code. I added the CSS to what I already had.

It did improve the situation in some points, but please see:

1. 9 and 10 still colser than they should be
2. Radio buttons shouldhave some spcae from the text that follows them
3. The text for some questions now comes out on the left, while with the previous CSS it came up on the right as it should.

The form is https://form.jotform.com/232695883483472

Please advise,

Doron

Hi Doron,

Can you review my cloned form here? If everything goes well, you can replace your existing CSS with the following:

.form-line-column .form-label {

   text-align: right!important;

   direction: rtl;

}

.form-all *{ text-align: right; direction: rtl; !important;}

/*Thread - 5580721*/

/*For the Scale Rating field*/

.rating-item:last-child {

   margin-right: 24px !important;

}

span.rating-item-title.for-to {

   text-align-last: left;

}

span.rating-item-title.for-from {

   text-align-last: right;

}

/* to align single choice */

.form-checkbox-item label:before {

 position: relative;

 direction: rtl !important;

 display : inline-flex;

}

/* to align single choice */

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

 position: absolute;

 direction: rtl !important;

 right: 7px !important;

 float: right;

}

/* to align single choice */

.form-radio-item label:before {

 position: relative;

 direction: rtl !important;

 display : inline-flex;

}

/* to align buttons */

.form-pagebreak{

 float: right;

}

/*Thread - 5580721 - Ends here*/ 

.rating-item {

margin-right: 21px!important;

}

.form-radio-item label::before {

margin-left: 21px;

}

.form-label.form-label-auto {

text-align: right;

}

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