How to align the option of the Single choice

Please check this form:

I don't know how to fix the alignment of the options.

It's an arabic form so I need it in RTL.

Best

Hi ADD_info,

Thanks for reaching out to Jotform Support. You can easily fix the Radio button alignment by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

.form-all, .form-header, .form-subHeader, .form-textarea, .form-textbox {

  direction: rtl;

  text-align: right !important;

}

/* Checkbox & Radio alignment RTL */

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

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

  right: 0;

  margin-right: 0;

  float: right;

}

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

  right: 4px;

}

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

  right: 8px;

}

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

  float: right;

}

/* Force labels and radio buttons into one vertical column */

.form-multiple-column,

.form-single-column {

  width: 100%;

  display: block !important;

}

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

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

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

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

  width: 100% !important;

  display: flex !important;

  align-items: center !important;

  margin: 4px 0 !important;

}

.form-radio-item input[type="radio"],

.form-checkbox-item input[type="checkbox"] {

  float: right !important;

  margin-left: 6px !important;

  margin-right: 0 !important;

}

.form-radio-item label,

.form-checkbox-item label {

  display: inline-block !important;

  vertical-align: middle !important;

  white-space: nowrap !important;

  margin: 0 !important;

  padding: 0 !important;

}

/* Column fix */

.form-all .form-section .form-col-2 {

  width: 33.3% !important;

}

.form-label,

label.form-label.form-label-auto,

label.form-label:not(.form-label-top) {

  text-align: right !important;

}

span.phone-separate {

  display: none;

}

.form-line-error .form-error-message {

  right: unset !important;

  left: 0 !important;

  text-align: left;

}

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

  right: 0;

}

.form-checkbox+label,

.form-checkbox+span,

.form-radio+label,

.form-radio+span {

  padding-right: 30px;

  padding-left: 0;

}

.form-matrix-values label.matrix-choice-label {

  padding-right: 20px;

  padding-left: 0;

}

.form-label:not(.form-label-top) + .form-input .form-address-line + .form-address-line,

.form-sub-label-container + .form-sub-label-container {

  margin-right: 8px;

}

.form-address-line + .form-address-line {

  margin-left: 0;

}

.form-product-item .p_image .image_area {

  margin-left: 10px;

  margin-right: 10px;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

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

thank you

Thanks

Hi ADD_info,

To keep the conversation organized, I moved your other question to its own thread, and someone from our Support Team will help you with it here.

Let us know if you have any other questions.