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

    How to make configurable list widget responsive?

    Asked by cgskillaccounts on October 28, 2016 at 05:07 PM
    https://form.jotform.me/62624911802452

    I changed to different widget. But I believe this widget when in mobile, it would not look like this kind of layout.

  • Profile Image
    JotForm Support

    Answered by Kiran on October 28, 2016 at 05:25 PM

    Unfortunately, the configurable list is not responsive on the forms. However, you may inject some CSS code to the Custom CSS code section of the widget to display the widget in multiple lines.

    You may try injecting the following CSS code to the widget.

    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: "Positions need be filled by"; width: 35%; font-weight: bold;}

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

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

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

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

    td.col1 { width: 35%; }

    td.col2 { width: 18%; }

    td.col3 { width: 10%; }

    td.col4 { width: 28%; }

    td.col5 { width: 25%; }

    The configurable list will be displaying as shown below:

    Let us know if that works for you. We will be happy to assist. 

  • Profile Image
    JotForm Support

    Answered by Kiran on October 28, 2016 at 05:28 PM

    Please correct the width of the col3 to 20%. Here is the corrected CSS code.

    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: "Positions need be filled by"; width: 35%; font-weight: bold;}

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

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

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

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

    td.col1 { width: 35%; }

    td.col2 { width: 18%; }

    td.col3 { width: 20%; }

    td.col4 { width: 28%; }

    td.col5 { width: 25%; }

    Thank you!