Configurable list widget doesn't fit in one row

Hello 

Can you help me resize the widget on this form?  It is very long and goes beyond the borders.  

Many thanks

Are you referring to the configurable list widgets on your JotForm? It is possible to have the input fields of the configurable list widget in two lines by injecting some CSS code. I see that there are 4 widgets are used on your JotForm. Please allow me some time to work on the CSS code and get back to you.

The question related to empty fields in the auto-responder shall be addressed on a separate thread shortly. Please follow the thread link below. 

https://www.jotform.com/answers/967292

Thanks!

yes the widget on 2 lines is fine.  Do you have the CSS code?  

Yes. It takes different CSS code for each configurable list. I'm working on the CSS code to be applied to each configurable list on your form. 

Here is the CSS code that can be injected to the Custom CSS code section of the configurable list widget in ESLI Post-Recruiting Expense Report page.

th { display: none; }

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 { display:inline-block; float: left; padding: 20px 5px 1px 1px; }

td.col1:before { content: "Date"; width: 25%; font-weight: bold;}

td.col2:before { content: "Type of Expense"; width: 25%; font-weight: bold;}

td.col3:before { content: "Description"; width: 25%; font-weight: bold;}

td.col4:before { content: "City"; width: 25%; font-weight: bold;}

td.col5:before { content: "Method"; width: 25%; font-weight: bold;}

td.col6:before { content: "Amount"; width: 25%; font-weight: bold;}

td.col1 { width: 35%; }

td.col2 { width: 22%; }

td.col3 { width: 22%; }

td.col4 { width: 22%; }

td.col5 { width: 20%; }

td.col6 { width: 25%; }

I'm working on the CSS code for the other 3 configurable lists in the form and shall get back to you later today.

Thank you for your patience. 

Thank you for being patient. Here is the CSS code to the other configurable list widgets on the form.

The configurable list widgets displayed in the Finalized Itinerary page can be fit in the same line with little changes.  

Finalized Itinerary page, first configurable list widget.

th { display: none; }

td.col1, td.col2, td.col3, td.col4 { display:inline-block; float: left; padding: 20px 5px 1px 1px; }

td.col1:before { content: "Date of Event"; width: 33%; font-weight: bold;}

td.col2:before { content: "Type of Event"; width: 18%; font-weight: bold;}

td.col3:before { content: "Location (city/country)"; width: 23%; font-weight: bold;}

td.col4:before { content: "Contact/Agency"; width: 20%; font-weight: bold;}

td.col1 { width: 33%; }

td.col2 { width: 18%; }

td.col3 { width: 23%; }

td.col4 { width: 20%; }

Finalized Itinerary page, second configurable list widget.

th { display: none; }

td.col1, td.col2, td.col3, td.col4 { display:inline-block; float: left; padding: 20px 5px 1px 1px; }

td.col1:before { content: "Departure"; width: 25%; font-weight: bold;}

td.col2:before { content: "Flight #"; width: 25%; font-weight: bold;}

td.col3:before { content: "From"; width: 25%; font-weight: bold;}

td.col4:before { content: "To"; width: 25%; font-weight: bold;}

td.col1 { width: 35%; }

td.col2 { width: 22%; }

td.col3 { width: 22%; }

td.col4 { width: 22%; }

Following is the CSS code for the widget in ESLI Reimbursement Request Form page

th { display: none; }

td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 { display:inline-block; float: left; padding: 20px 5px 1px 1px; }

td.col1:before { content: "Date"; width: 25%; font-weight: bold;}

td.col2:before { content: "Type of Expense"; width: 25%; font-weight: bold;}

td.col3:before { content: "Description"; width: 25%; font-weight: bold;}

td.col4:before { content: "City"; width: 25%; font-weight: bold;}

td.col5:before { content: "Method"; width: 25%; font-weight: bold;}

td.col6:before { content: "Amount"; width: 25%; font-weight: bold;}

td.col1 { width: 35%; }

td.col2 { width: 22%; }

td.col3 { width: 22%; }

td.col4 { width: 22%; }

td.col5 { width: 20%; }

td.col6 { width: 25%; }

All the CSS codes to be injected to the Custom CSS section of their respective widgets.

Hope this information helps!