How to enlarge radio buttons inside a Matrix?

  • Profile Image
    quiethunder
    Asked on August 21, 2015 at 06:15 PM

    I have created a form that works fine using the Matrix tool but the radio buttons are very very small and is difficult for users to click exactly inside the circle.  I have read other threads saying there is no way to increase the size of the radio buttons.  Is there any other options like not having a button and just clicking within the cell anywhere so that it is more easily selectable?

  • Profile Image
    Boris
    Answered on August 21, 2015 at 09:46 PM

    I was able to make these fields larger by injecting custom CSS into the form:

    .form-matrix-values .form-radio,
    .form-matrix-values .form-checkbox {
      min-height: 51px !important;
      min-width: 50px !important;
      width: 90% !important;
    }

    input[type='radio']:checked::before {
      height: auto !important;
      width: auto !important;
      top: 2px !important;
      right: 2px !important;
      bottom: 2px !important;
      left: 2px !important;
    }

    On Firefox, the radio buttons and checkboxes inside matrices have remained seemingly the same size, but clicking anywhere in their matrix cell will mark them:

    In Chrome, Opera and Safari, the checkboxes will be visibly larger - almost taking the space of their entire cell. You can take a look at a demo form with these codes applied to see if this will work to your satisfaction:

    http://www.jotformpro.com/form/52328051187958

    Please let us know if you need further assistance.

  • Profile Image
    quiethunder
    Answered on August 21, 2015 at 10:09 PM

    Thanks Boris!  That's exactly what I wanted.

    Ron

  • Profile Image
    Boris
    Answered on August 21, 2015 at 11:12 PM

    You are kindly welcome, Ron. I'm glad to hear that the offered solution works to your satisfaction. :)

    Please don't hesitate to contact us again if you need any other assistance with your forms, we will be happy to help.