How to wrap columns in the Infinite List Widget to make its width responsive and fit the form?

  • Profile Image
    s2bonline
    Asked on June 17, 2019 at 11:44 AM

    Hi

    I have used your Infinite List Widget, however, it places all of my empty text boxes next to each other so when I have more than 4 empty boxes they go outside of the form. I have increased the width of my form, however, that's not the most user friendly experience and it also doesn't work when I embed the form within my online portal so I would prefer if I could move them below each other so that it all looks neat and tidy and easy to complete. Here's how they look now: 

    1560786213fields.jpg I would appreciate some assistance on this!


    Many thanks

    Simona


  • Profile Image
    Welvin
    Answered on June 17, 2019 at 01:51 PM

    Hello Simona,

    You can wrap the boxes with custom CSS codes. Kindly do the following steps:

    1. Please inject the following custom CSS codes in the widget:

    table#form td {

        display: inline-block;

        float: left;

    }

    Guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets.

    2. Inject the following custom CSS codes in the form:

    iframe[src*="//widgets.jotform.io/list/"] {

    width: 100% !important;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

    3. Adjust your form width.

    The result would be like this (cloned of your form): https://form.jotform.com/91675202925964

  • Profile Image
    s2bonline
    Answered on June 18, 2019 at 04:30 AM

    Hi 

    Unfortunately, this didn't work and I tried a couple of times, it still looks the same.

    Also, I would like to only have 4 empty spaces per row so I'd like to move more than just one empty space. How do I do that? 

    Many thanks

    Simona

  • Profile Image
    BDAVID
    Answered on June 18, 2019 at 05:56 AM

    Please try injecting the following code in each of your Infinite List widgets: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    tr {

       display: block !Important;

    }

    td.col5 {

       position: relative;

       margin-left: 0px;

       float: left;

    }

    Result: https://form.jotform.com/91682599233973

    1560851721result_001.png

    Let us know if you need more help, we will be glad to assist you.

  • Profile Image
    s2bonline
    Answered on June 18, 2019 at 08:38 AM

    This worked! Thank you!