How to make configurable list widget responsive?

  • Profile Image
    cgskillaccounts
    Asked 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
    Kiran
    Answered 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
    Kiran
    Answered 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!