How do I increase the spacing between check boxes/radio buttons so that when they are inline I can fit longer labels

  • Profile Image
    RosscoNZ
    Asked on November 30, 2013 at 06:45 PM

    if I have labels that are longer than approximately 16 characters, they return to the next line and I would like them to not do that and be on the one line. Is this possible.

    eg: (check box) Vehicle Service Center   (check box) Diesel Injection Center

  • Profile Image
    abajan
    Answered on November 30, 2013 at 07:28 PM

    Thanks for asking. Yes, it's possible. Injecting the following CSS will target the specific field shown in your screenshot:

    #id_17 .form-checkbox-item {
    width: 200px;
    }

    To apply the same width to all of the form's checkbox items, change the rule to just

    .form-checkbox-item {
    width: 200px;
    }

    Please see this guide on how to find the ID of a field.

    Here's a useful resource for learning CSS but let us know if you need further assistance with this.

  • Profile Image
    RosscoNZ
    Answered on November 30, 2013 at 07:40 PM

    Awesome, that fixed it.

    Thank you very much for the prompt reply, you guys rock!

    Cheers, Ross.

  • Profile Image
    abajan
    Answered on November 30, 2013 at 07:45 PM

    We appreciate your compliment, Ross.

    Incidentally, a slight correction to my reply: To apply the 200 pixel width to all checkbox items, inject the following

    .form-checkbox-item {
    width: 200px !important;
    }

    The !important keyword is necessary in the more general rule because classes don't carry as much weight as IDs. CSS can be tricky! lol


    Cheers back at you :)