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

  • Profile Image
    Printrbot
    Asked 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?

  • Profile Image
    david
    Answered 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
    Printrbot
    Answered 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
    Charlie
    Answered 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
    Printrbot
    Answered on March 04, 2015 at 03:27 PM

    perfect, that worked... thanks!

  • Profile Image
    david
    Answered 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.