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

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: 

 I would appreciate some assistance on this!

Many thanks

Simona

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. 

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

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

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

This worked! Thank you!