How do I bring text to a new line on checkboxes?

Hi, my form has a number of checkboxes with very long descriptions (see screenshot). I'd like break up the text into separate lines so that each selection stays within 1 or 2 columns. For instance, instead of:

Pickled Product (pickled peppers, olives, pickles, etc.)

I want it to look like this:

Pickled Product (pickled peppers,
olives, pickles, etc.)

Can you help?

Hello.

Please try injecting the following custom CSS to your form:

.form-line-column > .form-input-wide {
    max-width: 20em;
    white-space: normal;
}

You can also add this code by editing your form and going to the Designer:

And in the designer, please paste it into the textbox under the CSS tab:

Your form should now display like this:

Please try it out and let us know how it goes. We'd love to help you get your form looking just the way you want it to, and we will be glad to assist.

Excellent that worked perfectly thank you!

Now I'm wondering if columns can made to be flexible? For instance, can I move Fresh Salsa directly under the last option (Non-Alcoholic) of Beverages-Hot & Spicy and Hot Sauce under the last option (White Cheese)?

I'm afraid that it isn't possible at the moment with JotForm forms. It is not something that can be done by custom CSS styling either.

However, you can achieve this by getting the full source code of your form, and manually adding a JQuery scripting library to the form's code, together with some custom JavaScript code.

This technical thread might be useful to read if you'd like to implement it yourself: http://stackoverflow.com/questions/11434756/css-float-elements-with-unequal-heights-left-and-up-in-grid

Please note that if you are using source code of your form, you will have to re-export the form's source every time after making any changes in our Form Builder.

Please let us know if you need any help, and we will be glad to assist you.

Thanks for the tips! Your support forum is always quick and helpful.