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

    Why clicking area around radio button is so wide?

    Asked by Benflips on July 12, 2016 at 07:05 AM

    Hi, at some point as we have added custom CSS there has been an error developed in how the radio buttons function.

    If I have radio buttons set in more than one column, if I hover the mouse over the 2nd or subsequent buttons, I can't actually press them...i have to take my mouse further to the right onto the text/label of a given button to 'activate' it.

    This is not the case for the first button/column.

    Could you please investigate and hopefully fix on my behalf?

    Page URL:
    https://www.jotform.com//?formID=43420990799871

    in radio buttons label Activate and
  • Profile Image
    JotForm Support

    Answered by Nik_C on July 12, 2016 at 10:25 AM

    I checked your form and I was able to replicate the issue you're describing, I'll do some tests and will get back to you when I find out the solution.

    Thank you for your patience.

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on July 12, 2016 at 04:36 PM

    I'm sorry for this delay, the problem is in this block of your CSS:

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

        white-space : normal;

        display : block;

        top : -14px;

        left: 14px;

        position : relative;

    }

    Especially top and left, you could decrease left to 8px for example and it should be better for clicking.

    Other way around would be to remove everything except display block line, and then labels will be below the button, and that way wrapper around the label will not affect clicking.

    But I assume that you intended to move labels to be in line with buttons.

    If you have any further questions or you need assistance please let us know.

    Thank you!

  • Profile Image

    Answered by Benflips on July 12, 2016 at 07:45 PM
    I made this change, tested and then reverted because it didn't resolve the
    issue.
    I brings the option text closer to the button icon (and in many cases
    causes it to overlap, but there were still many buttons that did not work
    when i click on the button itself - only on the text near to the button
    (immediately to the left)
    Please let me know if there is some other resolution or workaround.
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...
  • Profile Image
    JotForm Support

    Answered by Chriistian on July 12, 2016 at 11:24 PM

    It appears that the width of the radio item labels extends further to the right, which is why it blocks the next radio button beside it. To resolve the issue, we will need to adjust the width of the label to fit the content. Simply inject the custom CSS below:

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

        width: fit-content;

    }

  • Profile Image

    Answered by Benflips on July 12, 2016 at 11:45 PM
    spectacular. Thank you
    *Regards,*
    *Dr. Ben Phillips*
    Chiropractor
    B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
    ...