How can I make table cells for Infinite List Widget responsive?

I have an infinite list widget that has 7 columns. I am trying to figure out how to make all the columns and added rows show up properly on mobile-width screens. I tried a few support threads about a week ago, but since then have removed any custom coding related to the widget in order to try and work with it from scratch

Here are screenshots of what it looks like on desktop vs mobile width (with each field set to 100 pixels from within the widget)

Smaller width screenshot

Please try injecting the following CSS code to the Custom CSS code section of the widget.

td {

  display:inline-block;

  float: left;

}

input {

  width: 100% !important;

}

Now, inject the following CSS code to the form by following the guide How-to-Inject-Custom-CSS-Codes

iframe[src*="//widgets.jotform.io/list/"] { width: 100% !important; height: auto; }

After add the CSS code to the form, the widget should be displaying as shown below on a mobile device.

Hope this information helps! 

Hi thank you for the response. I inserted the code, and while it stacks the cells, this is what I see when on smaller screen widths - the iframe is a specific height and in this case is cutoff to the first 3 fields 

Hello, 

Please add this css code to your form. Please follow this guide:

How-to-Inject-Custom-CSS-Codes

#form{

 height: inherit;   

}

Your page will look like this:

There is a problem after adding product order. The data does not align properly. I will work on this issue and will let you know the improvements about it.

Regards.

Hi thank you - unfortunately I have encountered the same problem I did using this code solution previously - once you add rows (either on desktop or mobile) the entire section is unreadable for the user.

Please replace the custom CSS code injected to the widget with the following code:

table#form td {

  display:table-cell;

  float: left;

}

input {

  width: 100% !important;

}

table#list tr {

    display: table-row;

}

table#list td, th {

    display: table-cell;

}

It should be displaying as shown in the screenshot below on a mobile device.

Let us know if you need any further assistance. We will be happy to assist. 

Thank you - getting much much closer - it works great on desktop - but on mobile width, its cuts off the columns based on screen width... Here is a screenshot

Thank you for helping me work this out.

I have made added some CSS code to the widget on your form to display it as below:

The change in the CSS code is to the last section of the earlier injected code i.e., changed the display from table-cell to inline-block. Additionally added few more lines as provided below:

table#list td, th {

    display: inline-block;

}

table#list th {

    max-width: 50px !important;

font-size: 12px;

}

Please check your form and let us know if that works for you. Thanks!

Thank you! That is working great.

One last request - When on deskop size, is it possible to have the fields stack on top of each other (like they do on mobile), and then still display the added rows horizontally like they currently do? 

If you mean to display the widget as shown below on the desktop, you may add the following CSS code to the widget in addition to the existing CSS code.

@media screen 

  and (min-device-width: 1200px) 

  and (max-device-width: 1600px) 

  and (-webkit-min-device-pixel-ratio: 1) { 

table#list {

width: 33%;

}

table#list th {

    max-width: 50px !important;

}

table#form {

width: 33%;

}

}

Hope this information helps! 

To clarify, I would like to be able to display it as shown in the composite image I made below, a combination of how it looks on the desktop and the mobile right now. Is this possible for desktop display?

I'm not sure how you want to fit the 7 column widget on a mobile device width, especially the inputs there are not 1 character length. Perhaps this kind of formatting would work for you.

Here's my form: https://form.jotform.com/63023654620953 

This is how it looks like on smaller screen or smaller device width:

In a mobile emulator, here's how it looks like in action:

If that's something that will work for you. You can clone my form by following this guide: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL. From there, you can check out how my form was setup and how the CSS code are added. If you want further assistance on that, let me know and we'll walk you through.

Thank you.

PS: The trick was based on this link https://css-tricks.com/responsive-data-tables/. Just need to tweak it to fit your form.

To correct your assumption in this case I am not trying to make create this 7-column display on a mobile, I am trying to create this display on the desktop version. Your resource is super useful though. Can you or anyone help me modify the display on desktop sizes to resemble the image below? Where the added rows are in columns but the input fields are stacked?

Hello,

To clarify things, could you please list the requirements of your design once again. This thread started with changing the view of the infinite list widget with reference to mobile view. However, I see that you want a specified view on desktop. So here is what I understood from the dialogue here:

1) You want a 7 column display of the infinite list widget's product entry fields on both desktop and mobile.

2) You want 7 column display of the entered product details on mobile, but 7 row display of the entered product details on desktop.

If this is the case, please confirm the design. 

We are awaiting your response.

Hi Seth, sorry for the confusion.

1. The display on mobile right now is perfect, we don't want to change that.

2. The display on desktop: We wanted to know if this look is possible: (7 column horizontal display for added rows, stacked single column of input fields)

Please add the following CSS code the custom CSS code section of the widget.

@media screen 

  and (min-device-width: 1200px) 

  and (max-device-width: 1600px) 

  and (-webkit-min-device-pixel-ratio: 1) { 

table#form {

width: 33%;

}

}

This should be displaying the list input fields in stack in desktop as well. 

Please let us know if we can be of any further assistance. Thank you! 

That works thank you. I started testing the form and realized that row labels dont necessarily line up with the columns on the added rows (depending on whats been entered) ...

It seems like the easiest solution would be to add labels above each added row since the amount of text the user enters will always vary. 

So is it possible to add labels above each new added row? I know a support member gave me a version of the solution here https://www.jotform.com/answers/964475-Adding-labels-to-infinite-list-widget#9 but it conflicted with other code I was receiving from other support threads at the time, all of that was cleared out so that I could restart with a single thread. 

(Let me know if I should start a new thread for this)

Since we already have a thread with this issue, let me check the code and get back to you on the other thread. Please allow us some time to check this up since we having some extra traffic to our support forum. We will get back to you as we find any solution for the issue on the other thread.

Thank you! 

K I will await your response - thank you for your continued support. 

Checking in on the labeling issue

I am sorry for the delay. We were extremely busy yesterday with extra traffic to the support forum. I'll send you a response on the other thread in few minutes.

Thank you!