What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    CSS code to correct overlaping and text align on radio buttons?

    Asked by sophrokhepri on January 10, 2017 at 02:34 AM

    hello I found on the forum a css code to avoid overlapping

    .form-radio-item label {

        white-space: normal;

        margin-left: 30px !important;

        text-indent: 0px !important;

    }

    the result is there:

    2 questions,

    can I reduce the space between buttons and text (highlighted in red) ?

    can I align the rest of the text to the first part of text (highlighted in blue) ?

    if my items could look like this for ex would be perfect:

    O   Handicapés
          mentaux

    Thanks for your help

    Philippe

    Page URL:
    https://form.jotform.com/63355623360958

  • Profile Image
    JotForm Support

    Answered by Charlie on January 10, 2017 at 04:25 AM

    Perhaps this would work for you:

     

    Your form has a lot of space horizontally so instead of moving some text in a new line, I just expanded the radio button field. 

    You can replace the current CSS code you have with this one:

    /*You can adjust the margin-left here*/

    .form-radio-item label {

        white-space : normal;

        margin-left : 10px !important;

        text-indent : 0px !important;

    }

    /*This will automatically adjust based on the form's width*/

    #id_22, #cid_22 > div {

        width: 100% !important;

    }

    /*Here you can set the width of each radio button*/

    span.form-radio-item {

        width: 250px !important;

    }

     

    Let us know if that works.

  • Profile Image

    Answered by sophrokhepri on January 10, 2017 at 08:32 AM

    yes it works but it alters the entire form 

    is it possible to design one per form item?

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 10, 2017 at 09:39 AM

    Yes, it is indeed possible, first you will need to get the ID of the specific field you want to affect with this CSS code. 

    Right click on the field and select the inspect option, once there search the <li> related to the field you want to affect and copy the ID. 

    Then you only need to add it to the given code above, the first and last portion of codes affect currently all the fields in your form, so the code you should use for an specific field should be like this one: 

    /*You can adjust the margin-left here*/

    #id_22 .form-radio-item label {

        white-space : normal;

        margin-left : 10px !important;

        text-indent : 0px !important;

    }

    /*Here you can set the width of each radio button*/

    #id_22 span.form-radio-item {

        width: 250px !important;

    }

    If you have any question, let us know.