How to remove the label wrapping in radio button?

  • Profile Image
    bkaul
    Asked on February 20, 2018 at 03:36 PM

    In this form, there is a question stated "How would you like to pay for the registration fee" and it has two answers with radio buttons underneath that. The second answer "Please invoice me..." wraps to a second line even though there is plenty of room for the answer to remain on one line. I assume I adjust that using custom CSS but I have no idea what CSS I would need to add to make that adjustment. Can you please provide me with that info? Thanks.

  • Profile Image
    Jed_C
    Answered on February 20, 2018 at 04:36 PM

    You can inject the CSS code below remove the wrapping of the word "above" in your radio button.

    input[type="radio"] + label{

      width: 50% !important;

      white-space:nowrap;

    }


    .form-radio-item label{

      margin-top: 2px;

      display: inline-block !important;

    }

    Here's a sample screenshot.

    1519162568remove_wrap.png

    Let us know if you have any questions or if you need further assistance. 

  • Profile Image
    bkaul
    Answered on February 20, 2018 at 04:57 PM

    This is great, thanks. I thought that I'd be able to make a similar edit to another question on that form using what you gave me but I can't figure that out. On that same form, if you choose "Please invoice me..." you'll see 5 checkboxes then display. One of them wraps to two lines. Can you provide me with the CSS I would inject to fix that one as well? Thanks a ton!

  • Profile Image
    Jed_C
    Answered on February 20, 2018 at 05:18 PM

    Here's the complete CSS code:

    input[type="radio"] + label, input[type="checkbox"] + label{

      width: 50% !important;

      white-space:nowrap;

    }

    .form-radio-item label, .form-checkbox-item label{

      margin-top: 2px;

      display: inline-block !important;

    }

    Just replace the one I gave earlier with the code above. Let me know if you need further help.

  • Profile Image
    bkaul
    Answered on February 20, 2018 at 05:48 PM

    Thank you! The support you guys provide is phenomenal!