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

    How to add more width or disable word wrap on multi-column radio buttons?

    Asked by Printrbot on March 03, 2015 at 04:00 PM

    I searched for this but found a variety of answers dating back a couple years.  What is the best practice for making this change in 2015?

    Page URL:
    http://www.jotformpro.com/form/50485999849986

    radio buttons OR add more 2015
  • Profile Image
    JotForm Support

    Answered by david on March 03, 2015 at 04:46 PM

    Hi,

    There are indeed several different ways to accomplish what you are looking for.  Anything from making the text smaller, increasing the width of the radio button field or even increasing the width of your form.  The easiest place to do to this is in the form designer:

    Once there, click on the "CSS" tab, then click on the label for your radio buttons.  You can then select from many different CSS properties for your labels.

    You can also change the width of you form, the radio button fields themselves and various other things from the designer.

    If any of the options interest you specifically and you are unable to get it to work, let us know and we will be happy to help.

  • Profile Image

    Answered by Printrbot on March 04, 2015 at 01:38 AM

    I made a width change for the bullets in designer and saved the form.  It looks correct in the designer but the changes are not being reflected in the actual form.  What am I missing here?

  • Profile Image
    JotForm Support

    Answered by Charlie on March 04, 2015 at 08:11 AM

    Hi,

    Could you try adding "! important" into your code? Here's what the custom CSS code will look like.

    .form-radio-item {

        width : 200px !important;

    }

    I've cloned your form for testing purposes, see if this is the correct format: http://form.jotformpro.com/form/50623084200946 

    Do let us know if this works.

    Thank you.

  • Profile Image

    Answered by Printrbot on March 04, 2015 at 03:27 PM

    perfect, that worked... thanks!

  • Profile Image
    JotForm Support

    Answered by david on March 04, 2015 at 03:54 PM

    Glad to hear it!  Occasionally, CSS added in the designer can be overwritten by by CSS added by the base form.  Adding the "!important" tag forces that CSS to take priority no matter what.

    Let us know if there is anything else we can help you with and we will be happy to do so.