-
Enosh_orgAsked on June 24, 2024 at 9:11 AM
hey
our form text box on form https://www.jotform.com/build/241693023052448/design
looks connected to the one next to her on the first row
i think the correct way to this boxs is like here
https://www.jotform.com/build/241273289887472/design
?how can we change the box in the first link form?
thank you
-
Mahmoud JotForm SupportReplied on June 24, 2024 at 9:21 AM
Hi Nitzan,
Thanks for reaching out to Jotform Support. You can use the RTL CSS code from our guides here. This will solve the issue. Let me show you how to use it:
- 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.
.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;
}
Check the result below:
Give it a try and let us know how it goes.
-
Enosh_orgReplied on June 25, 2024 at 1:52 AM
thank you it works!!