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

    How to adjust overlapping of radio buttons?

    Asked by rossall on May 20, 2016 at 04:39 AM

    I have within layout made 3 columns for my page and I have then increased the radio buttons to 2 columns each but the text for each radio button if large overlaps the other.

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

    radio buttons increase in how
  • Profile Image
    JotForm Support

    Answered by Chriistian on May 20, 2016 at 06:06 AM

    Hi,

    I believe you are referring to these radio buttons.

    Please try injecting the CSS below to your form. Please see How to Inject Custom CSS Codes.

     

    .form-radio-item label {

        white-space: normal;

        margin-left: 30px !important;

        text-indent: 0px !important;

    }

     

    Doing so will wrap the texts of radio buttons as below.

    Do let us know if you need further assistance.

  • Profile Image

    Answered by rossall on May 20, 2016 at 06:42 AM

    Thank you Chriistian.  Could you do the CSS for just certain Radio buttons eg just Option Block 3 and Option Block 4.   As the others look better in the normal format.

    Cheers, Kirstie

  • Profile Image
    JotForm Support

    Answered by Nik_C on May 20, 2016 at 08:55 AM

    Sure, just replace the CSS for this one below:

    #id_16 {

        white-space: normal;

        text-indent: 5px !important;

    }

    #id_17 {

        white-space: normal;

        text-indent: 5px !important;

    }

    And it should look like this:

    Let me know if you have further questions.

  • Profile Image

    Answered by rossall on May 23, 2016 at 04:35 AM

    Hi Jotform Support

    Sorry to be awkward but could I have the CSS so that the radio button text wraps in alignment as the first does but only for the ID's 16 and 17

     

    Thank you again

  • Profile Image
    JotForm Support

    Answered by Chriistian on May 23, 2016 at 05:00 AM

    Please try this custom CSS code in your form to implement the same style as the first one for ID 16 and 17 only.

    #id_17 .form-radio-item label {
      white-space: normal;
      margin-left: 30px !important;
      text-indent: 0px !important;
    }

    #id_16 .form-radio-item label {
      white-space: normal;
      margin-left: 30px !important;
      text-indent: 0px !important;
    }

  • Profile Image

    Answered by rossall on May 23, 2016 at 03:27 PM

    Thank you so much for all your help.  Can always rely on Jotform support for quick answers and great assistance.