كيفية تعديل اتجاه ووزن الخط

كيف يتم تعديل اتجاه و لوم الخط الي قائمة الشروط القصيرة في النموذج باستخدام معرف الخانة علمة بانها input_48

242915214345453

Hi am.elbasiouny,

Thank you for reaching out to Jotform Support. While we do offer Support in many foreign languages, and we're working hard to add more every day, we don't currently have Arabic Support agents who can help you. So I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using.

Let me forward your concern to the relevant team, so they can check the issue further.

Thanks for your patience, we appreciate it.

Hi am.elbasiouny, 

For widget like this, the CSS to style them has to be added directly in the widget's settings. Doing that is easy. Let me show you how:

1. Copy this CSS code:

/* Setting field to RTL - 20509531 */

/* Set the text direction to RTL */

#scrollContent, #main{

    direction: rtl;

}

/* Invert the margin for the checkbox to it doesn't cover the text */

body[data-type=terms-scroll-widget] #action>input+label:before{

    margin: 0 0 0 8px;

}

/* Setting field to RTL ends here */

2. Open Form Builder for your form.

3. On the widget, click on the Wand icon to open the Widget Settings.

4. In the Widget Settings on the right, click on the Custom CSS tab.

5. Paste the CSS code into the field underneath any existing CSS.

You can see it in my cloned form here. I've also added some additional CSS on my form to help with the text direction overall. If you wish to do that as well, I can help you with that too. Let me show you how:

6. First, copy this code:

/* Form to RTL - 20509531 */

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

direction: rtl;

text-align: right !important;

}

.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;

}

.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-multiple-column, .form-single-column {

width: 100%;

display: inline-flex;

flex-wrap: wrap;

}

.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%;

}

.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;

}

#customFieldFrame_48{

  max-width: unset !important;

}

.form-collapse-mid{

  margin-right: 40px;

}

/* Form to RTL ends here */

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

8. 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.

thanks a lot for all