How to adjust overlapping of radio buttons?

  • Profile Image
    rossall
    Asked 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.

  • Profile Image
    Chriistian
    Answered 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
    rossall
    Answered 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
    Nik_C
    Answered 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
    rossall
    Answered 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
    Chriistian
    Answered 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
    rossall
    Answered 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.