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

    Configurable list widget doesn't fit in one row

    Asked by laciezahradnik on October 20, 2016 at 04:10 PM

    Hello 

     

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

     

    Also, is there anyway to eliminate the the empty fields when an email recipient receives the form content which has been submitted?

     

    Many thanks

    Page URL:
    https://www.jotform.com//?formID=62275867952975

    recipient content thanks hello
  • Profile Image
    JotForm Support

    Answered by Kiran on October 20, 2016 at 09:58 PM

    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!

  • Profile Image

    Answered by ChelseaRose on October 25, 2016 at 04:07 PM

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

  • Profile Image
    JotForm Support

    Answered by Kiran on October 25, 2016 at 09:04 PM

    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. 

  • Profile Image
    JotForm Support

    Answered by Kiran on October 25, 2016 at 10:04 PM

    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!