Form Languages: Form labels are showing distorted when changing language to Arabic.

  • Profile Image
    Asked on November 23, 2016 at 09:53 PM

    I think the screenshot tells the story. Can I do anything to improve the form so that text does not overwrite the checkboxes?

  • Profile Image
    Answered on November 23, 2016 at 11:53 PM

    I have checked your form and I can replicate the problem, I have also cloned the form and the same problem happened on my end, initially I thought it was a problem with the translation tool, but after spending some time checking what could be causing the problem I found it was due to the theme you have applied. 

    The theme has some CSS code that changes the check boxes layout, this code is generating the check boxes to display over the text when the position of the labels is changed. 

    So what I would suggest you is to inject this CSS code that will help you to resolve the problem on your form: 

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

        right: 0px !important;


    This guide will help you to inject the code: How-to-Inject-Custom-CSS-Codes

    This is how the fields will be displayed once the code is injected: 

    Here's also the link to my cloned form of yours where I have applied the code so you can take a look to the live sample: 

    Please inject the given code and if you have any question, let us know.