How can I right align the terms & conditions widget to the right?

I'm trying to align the Terms & Conditions widget to the right but no matter what I do the checkbox stays left-aligned (screenshot below).

I've tried the following CSS code in the widget properties but it doesn't seem to work:

#input_19{

  direction:rtl;

}

Help!

Upon checking the form, I can see that you already managed to align the said field to the right.

Please let us know if you need further assistance with this.

I do need further assistance with this matter.

As specified in the description above, I managed to align the field to the right, however, the checkbox stays left aligned as can be seen in the screenshot above (highlighted in a red square).

What do I need to do so that the checkbox will be also aligned to the right?

You can  use this custom CSS to change the terms and condition widget labels to RTL.

#_label{
 
float: right;
}

Please give it a try and let us know if you need further assistance.

Thank you for the answer, nevertheless, though I've added the above piece of code in the widget settings; the checkbox remains to be on the left side of the label:

I have checked your form and it seems the terms and condition widget label has been changed to RTL with the code you have added.

Here is a screenshot on how I view the form.

\Kindly try to view the form in another web browser and let us know if you need further assistance.

That's what I'm trying to do, to align the whole widget/field to the right side of the form.

But no matter what I do, the label is aligned to the right but the checkbox stays on the left side.

What else can be done to solve this issue?

You can try this custom CSS

#_label{
 
float: right;
}
.icheckbox_minimal{
float: right;
}

For the mobile responsiveness of the form, I have moved it to a new thread.

Kindly follow this link:https://www.jotform.com/answers/2035768

Thanks 

It seems to be working on my PC chrome but on mobile Chrome/Safari, the checkbox is still on the left side.

Additionally, could you please assist me with the alignment of all the labels and the button of the bottom [Configurable List] widget:

May we know the device you have used to view your form so that we can adjust the fields when in mobile?

Regarding the configurable list, kindly check thread:https://www.jotform.com/answers/2035768-terms-and-condition-widget-mobile-responsiveness

Sure, I'm using iPhone 7 Plus.

It's also like that in the Preview Form, mobile tab on your website.

Please add this CSS code to both widgets to see if that will resolve the issue:

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

#_label{

  float: right!important;

}

.icheckbox_minimal{

float: right!important;

}

}

How to Inject CSS Codes to Widgets

No, it doesn't solve the issues.

The Configurable List is still unresponsive on mobile.

The terms&conditions widget still displays the checkbox on the left side of the text.

I really need to finalize this form so that we could decide if we want to proceed with the paid plan, is there any chance I could receive real-time support?

Please insert the below CSS for the first T&C widget:

@media screen and (min-width: 10px) and (max-width: 500px){

#_label{

float: right !important;

}

.icheckbox_minimal{

float: right !important;

}

}

Please insert the below CSS for the second T&C widget:

@media screen and (min-width: 10px) and (max-width: 650px){

#_label{

float: right !important;

}

.icheckbox_minimal{

float: right !important;

}

}

Related Guide: hHow-to-Inject-CSS-Codes-to-Widgets 

Done that, the checkboxes are still on the left side:

I have been testing the terms and condition widget and it seems when we preview the form in the form builder, the widget is responsive and in RTL however, when viewed on an iPhone the widget is not RTL.

Please give me sometime to check this further, I'll get back to you once I have further information.

Thank you.

I've checked it on another, Android mobile device (LG G6) and it the same issue there.

It seems the custom CSS on the terms and condition widget is not working in mobile.

Let me try to test on this further and I'll get back to once updates are available.

Hi, any updates on this one?

My apologies for the delay, however I have not able to change how the checkbox in the terms and condition to be RTL.

I can't seem to target it correctly when viewed in a mobile device. The CSS does change when using emulators.

Here is the cloned form I have been testing.

https://form.jotform.com/93143211044948

Ok, is there any alternative for the T&C widget that I can use and can be RTL?

We have the Short Scrollable Terms widget, but I was not able to make it RTL. 

You can use a basic Text field to add a link to your Privacy page and a basic Checkbox field for the users to agree. 

Something like this - https://form.jotform.com/93172340383959 

That's an interesting option, I've followed the instructions but now I'm having difficulties to:

1. Make the text field to be displayed in one line.

2. Align the text field and the checkbox to be displayed in the same line.

3. Align the whole section (checkbox + text field) to the right side of the form.

Can you assist me with those?

Kindly try this CSS code.

#label_43{
position: absolute;
margin-right: 30px !important;
}


@media screen and (max-width: 480px) {
  #label_43{
position: absolute;

margin-right: 20px !important;

}
#input_43_0{

margin-right: -170px !important;
}

}

Screenshot:

If the checkbox is not showing in IOS, you may reduce the margin to margin-right: -150px !important;

Form:https://form.jotform.com/93172450301951

Please give it a try and let us know if you need further assistance.

Ok, added the code and this is how it looks like now:

On PC:

On iPhone:

I have checked your form and it seems you're using a text element as your terms and condition.

I would suggest using the normal checkbox field.

You may also try to clone my form instead.

Form:Form:https://form.jotform.com/93172450301951

Here is a guide :https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

Let us know how it goes.

Yes, I've followed BJoanna's suggestion to use a checkbox and a text field.

I could use just the checkbox field but how will I be able to add a hyperlink in the checkbox options?

Kindly add these CSS in your form

@media screen and (max-width: 480px){
  .form-line-active {

background-color: transparent!important;

}
#id_45{

background-color: transparent;
margin-right:-150px !important;
}
#cid_44{
  margin-right:50px !important;
}
    }


.form-line-active {

background-color: transparent!important;

}
#id_45{
position: absolute;
background-color: transparent;
}
#cid_44{
  margin-top: 7px;
margin-right: -570px;
}

Screenshot form an iPhone:

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

Much better, but the red asterisk (for the required field) location on iPhone is bad: 

And on PC browser it looks weird as well:

I have manually updated your form CSS.

Kindly check it out and let us know if you need further assistance.

Thank a lot Richie P.

It was looking great but then I've added the second T&C and tried to copy-paste the CSS code you added for the first one, but totally ruined both :-( Really sorry for that.

Could you please update my form's CSS for both T&Cs and align them + make them responsive.

And please notice that the second T&C doesn't include a hyperlink and it's not required, so I've added it only as a checkbox field (without the text).

Thanks again for all your help, once the T&Cs are fine we'll publish the form and go over to the paid plan.

Hi, I have updated the CSS in your form.

Kindly check the form and let us know how it is viewed at your end.

- The red asterisk, for the first required T&C location on iPhone is out of the form.

- The second T&C text is always split into 3 lines - could you make it appear in one line and split only as part of responsiveness per displayed screen (same as the first T&C) + if the text can be moved a bit left from the checkbox as in the first T&C it would be great.

Hi, I cloned your form, and did the following adjustment my clone version, could you please look at it? https://form.jotform.com/93203243650953

Desktop view:

Mobile view:

I found more convenient to use the Terms and Conditions widget to avoid all the alignment issues in desktop and mobile views when using separate fields. I injected this code inside the widgets to make them right aligned:

#main{

    direction: rtl !important;

}

If that is what you need with your terms and conditions, please clone it if you want to: https://www.jotform.me/form/93142828942463

Let us know if you need more help.

Thank you, that's exactly what I needed - I updated my form with your suggestion.

One small thing though; the whole widget is right-aligned except for the red asterisk, is there a way to make the red asterisk in the first t&c widget to be displayed on the right side of the checkbox? 

Could you please share a screenshot where you want to position the asterisk?

Is that what you want to position the asterisk? We'll wait for your reply. Thank you.

If it could be displayed as in one of the below screenshots (preferably option A), it would be perfect.

Option A:

Option B:

Thnx

Please keep in mind that this is a workaround and it might not work on a different device or screen resolution. 

Please add this custom CSS code:

.required {

position: absolute;

right: 20px;

}

iframe#customFieldFrame_51 {

width: 370px !important;

}

Here's the result of my test form:

Ok, I give up :-) It doesn't work well.

It's breaking the whole widget display and it's not that critical and doesn't worth wasting so much time on it.

If in the future you're adding some full RTL support for the T&C widget pls let me know.

I really appreciate your assistance.

Thank you for updating us.

We will let you know once we have any updates on full RTL support on the widget.

You could make the required asterisk right aligned with this code: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets

.required{

    float: right !important;

    width: 2% !important;

}

Please check the results in this form: https://form.jotform.com/93214242165955  

Desktop view:

Mobile view:

Hope this helps.

It helps indeed, the asterisk is now aligned to the right.

I might've found an issue with the update widget function:

When I updated the existing t&c widget CSS and pressed the update widget button it didn't actually save the changes and the form preview remained the same.

Only when I duplicated the widget, the new one was displayed with the changes and then I deleted the first one.

The same thing happened when I tried to update the CSS of the my second t&c, I wanted to add a margin so that both t&c's checkboxes are aligned but only when I duplicated the widget it actually saved the changes in the CSS.

You should check it.

In any case, my issue is now solved.

Thanks a lot.