How to adjust the spacing between a radio button and it's answer only for that specific input

  • iconic_productions
    Asked on October 21, 2017 at 10:28 PM

    I am trying to use the CSS codes to only alter the width of a field with 4 radio buttons. 

    I created 4 columns, but the 3rd option is too long and is positioned correctly.  I can't seem to change the spacing for just that input field.

    I am referring to the Radio Button "Are there any photos or images that were taken regarding the issues." and am talking about the 3rd option.


    Page URL: https://www.jotform.com/build/72911787576875
  • Support_Management Jotform Support
    Replied on October 22, 2017 at 3:26 AM

    To confirm, you wanted to increase the space between Yes, photos and video (3rd option) and No (4th option), highlighted in yellow below:

    How to adjust the spacing between a radio button and its answer only for that specific input Image 1 Screenshot 30

    All 4 options are evenly spaced with similar widths though. The reason why it looks misaligned was because the 3rd option has a longer label. Nonetheless, if you want the 4th one to be moved a bit further to the right, try the following CSS codes:

    #cid_340 span:nth-child(3) {

        margin-right: 30px !important;

    }

    Result:

    How to adjust the spacing between a radio button and its answer only for that specific input Image 2 Screenshot 41

    Complete guide: How-to-Inject-Custom-CSS-Codes 

  • iconic_productions
    Replied on October 22, 2017 at 4:14 AM

    Thank you for that.  it worked.

    Can you though explain to me how you figured the CSS code, so that if I have to do it to another form, I can without having to ask for support for each section.

    For instance,

    1) how did you work out it was #cid_340 span:

    2) what is nth-child

    3) why did you write the 3 after nth-child

  • Support_Management Jotform Support
    Replied on October 22, 2017 at 5:35 AM

    We're all using the browser console to inspect any part of the form. This same principle applies to any website (not just JotForm).

    How to adjust the spacing between a radio button and its answer only for that specific input Image 1 Screenshot 20

    1) how did you work out it was #cid_340 span

    It's the container of the radio buttons. And each option is within a span element.

    2) what is nth-child

    Here are some online resources I found after Googling online:

    https://www.w3schools.com/cssref/sel_nth-child.asp

    https://css-tricks.com/how-nth-child-works/ 

    3) why did you write the 3 after nth-child

    Because the element I'm targeting is the 3rd span.

    We can't teach you how to code in CSS so the best help that I can offer are online resources that will let you learn on your own.

    The 2 URLs I provided above are really good websites to learn CSS.

    https://www.w3schools.com/css/default.asp

    https://css-tricks.com/