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

    Radio buttons label are overlapping on mobile

    Asked by netruck on April 02, 2016 at 01:32 PM

    Also the radio buttons are only not appearing correctly on the Sales page.  I have radio buttons on that page vs. two. If I need to I can use a dropdown.

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 02, 2016 at 06:19 PM

    Inject this CSS codes to your form, this should display radio buttons properly on mobile.

    @media screen and (max-width:480px){

    .form-multiple-column[data-columncount="5"] .form-radio-item, 

    .form-multiple-column[data-columncount="5"] .form-checkbox-item {

        width: 100%;

    }

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

        word-wrap: normal;

    }

    .form-multiple-column {

        margin-left: 0;

    }

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Result:

    I can also see that you have existing CSS codes injected to your form. If by chance the above CSS codes doesn't work, it might let us know so we can assist you further.

  • Profile Image

    Answered by netruck on April 03, 2016 at 10:45 PM

    Thank you!  This has helped with the radio button - but it didn't fix the checkboxes.  Any help with that?  Attached is a screen capture of the checkboxes.

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 04, 2016 at 12:29 AM

    You can inject the css code below to fix the checkboxes.

    @media screen and (max-width:480px){

      .form-multiple-column[data-columncount="3"] .form-checkbox-item {

        width: 100%;

       } 

    }

    Here's a cloned demo that you can see in action: https://form.jotform.com/60940147858968 

    If you need further assistance, please let us know.
    Regards.