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

    Multi column radio boxes are all shown in a single column

    Asked by TCGHS on July 29, 2015 at 02:04 PM

    Think I might have messed something up in designer (probably in css)

    The radio button fields were meant to be multi-column and were working at one time.  Now they are back to all being in one column.

    Membership Kind & Delivery Method were meant to be 2 column

    Membership Type was 3 column.

    What am I doing wrong?

    Thanks,

    Mike

    Page URL:
    http://form.jotform.us/form/52046517168153

    multiple column boxes
  • Profile Image

    Answered by Ben on July 29, 2015 at 03:08 PM

    The reason why it seems broken is because of the CSS code that is added to your jotform. This is the CSS code:

    [data-type="control_radio"] .form-input, [data-type="control_checkbox"] .form-input, [data-type="control_radio"] .form-input-wide, [data-type="control_checkbox"] .form-input-wide {
        max-width: 250px;
        width: 100%;
    }

    I did make a clone of the form with this fixed so you can see it here:

    http://form.jotformpro.com/form/52096326192961

    You can clone it to your account, or if you wish to modify your own form, just follow these steps:

    1. Go to the Custom CSS field of your form (Inject Custom CSS Codes )
    2. Press CTRL+F to initiate the search and use this for searching:

    [data-type="control_radio"] .form-input, [data-type="control_checkbox"] .form-input, [data-type="control_radio"] .form-input-wide, [data-type="control_checkbox"] .form-input-wide

    There is a single entry that matches this value so now

    3. click on the custom CSS field in the preferences so that all styles are shown
    4. Press F3 button on your keyboard and the text will be selected for you.

    Remove the max-width: 250px; text, but nothing else.

    5. Save and preview - that is it :)

    If you are not sure how or want us to do it for you, just let us know and we would be happy to assist and make the change on your form as well.

  • Profile Image

    Answered by TCGHS on July 30, 2015 at 04:21 PM

    That did it - Thanks, much!!   Mike

  • Profile Image
    JotForm Support

    Answered by abajan on July 30, 2015 at 05:49 PM

    On behalf of my learned colleague, you're most welcome, Mike! Do let us know if there's anything else with which you need help.

    Cheers