Why clicking area around radio button is so wide?

  • Benflips
    Asked on July 12, 2016 at 7: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?

  • Nik_C
    Replied 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.

     

  • Nik_C
    Replied on July 12, 2016 at 4: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!

  • Benflips
    Replied on July 12, 2016 at 7: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)
    ...
  • Chriistian Jotform Support
    Replied 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;

    }

    Why clicking area around radio button is so wide? Image 1 Screenshot 20

  • Benflips
    Replied 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)
    ...