How to make Configurable list show all options without being cut off?

1 - On the configurable list (youth), I have several questions that I want to include, however, my form is being cut off when I pull it up on the computer.  The questions are all here, but I'm concerned that parents won't be able to see the questions that have been cut off.  Is it possible to make the form more than one line so that I can have 2 rows of questions instead of one? 

I originally thought that we would need to cut the configurable list into 2 rows which can be done, but requires a bit more code.

After taking a closer look I however noticed that all we should do is make the age field just fit the rest properly and all fields are shown.

I will help you with the code to go from this:

to this:

and this is the code:

td.col2 > div.stepper-wrap {
    margin-right: 0 !important;
}

You should insert it into the Configurable list custom CSS code section (not the forms custom CSS).

You can do that by clicking on the wand icon that starts the wizard:

and then by pasting the code to the Custom CSS field:

You already had some CSS there, which you should leave and add the one above next to it.

Do let us know how it goes.

Thank you - I was able to add the css code to the pages that needed it.  However, the youth page is the one I'm having issues with.  I actually have more to add to that particular page, but haven't done so yet - once I realized that it was being cut off on the right margin, I stopped adding.

So, could you share with me what I need to do to add a 2nd row?  I am only needing this for the 'Youth (6th-12th grade)' page.

 

Hi,

I believe you will need to adjust the width of your form. Making another row would not be advisable because it means the header columns will also need to adjust in another line, which means for every row you add the header column will be placed on the next line.

Here's an example of how it would looked like:

 

What I would recommend is that you adjust your form's width, also expand the width of the widget itself.

I've cloned your form for testing purposes, you can check it here: http://form.jotformpro.com/form/50821540285956?. You can clone it and check its settings by following this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

I added this custom CSS code under Form "Designer"->CSS tab:

.form-all {

width: 100% important;

}

While this is the custom CSS code I injected in the widget itself for the "Youth" section:

#customFieldFrame_83 {

width: 800px !important;

}

td {

white-space: normal;

}

tr {

white-space: normal;

}

 

I hope this gives you an idea on how to proceed.

Kind regards