Configurable List not mobile responsive.

I'm not sure what the original requester was asking, but I would like to have the form work properly on a smartphone, but it is too narrow to work right with a configuration list.   The form doesn't even show up on the screen.  I was hoping it would create a horiz

Please note that the more fields you add to the configurable list, the less responsive it will be. But, it is possible to adjust it through CSS injection. I believe that your form in question is the following: http://www.jotform.us/form/71455031507146 

Please try injecting the following CSS code inside each Configurable List widget CSS area:

@media only screen and (max-device-width:30em){

table#list {width: 100% !important;}

textbox, textarea, select{width:100% !important;}

input[type=text] {width: 100% !important;}

th {font-size: 10px !important;font-weight: normal !important;}

}

@media only screen and (max-device-width:60em){

table#list {width: 100% !important;}

textbox, textarea, select{width:100% !important;}

input[type=text] {width: 100% !important;}

th {font-size: 10px !important;font-weight: normal !important;}

}

Example:

Result:

Let us know if you need more help.

Are you telling me that if I add this css code it will adapt to the smaller width of a smartphone without affecting the results on a bigger screen?

I've tried this with no real effect I can see.   I can get my phone to see most of the form but telling it to use the desktop site, and this looks just like the normal desktop except for the fact that the layout is such that I can't see the submit button at the bottom of the page.  I've added a lot of space on the embedded page, but do I need to make the form longer?  I don't see any way to do that.

Yes, the CSS should only affect the mobile view.

Please provide us with a link to your web page with embedded form so we will be able to check the layout.

http://bapca.org/vbs_2017.htm is the web page.

 

Your mobile website might be not compatible with our JS embed code. Please try to embed your forms using iFrame codes.

Getting the form iFrame code

Let us know if you notice any issues after adding the iFrame codes.

I changed the way jotform is put on the page using your IFrame code.  It is a little obscure as I can't see anything on the page in Xara Web Designer Premium until I display the page.  The full page looks fine, but I see only a partial form on the smaller page size when selected in my browser or phone.  I see no reformatting like the example you provided above.  It also clips the form so that much of the right is missing (as is much of the bottom of the form).  Because I can't see the page until it is formatted in the browser, I have a hard time getting it located properly on the page, too.

OK, I implemented the IFrame insertion as you suggested.  It is better and I can see the width of the form on my smartphone, but not the length.  It is cut off on the bottom.    By the way, the iframe code can be different on the smartphone because the web server a different source for narrow screens.  At the moment it is the same.   I do see the reshaped entries as you show above, but it still cuts off before the end of the form.  I've allowed a lot of space on the webpage so I don't understand how to correct the problem.

Hello,

Since the javascript code that follows right after the iframe code is not included, the height does not automatically expand. So what you need is to adjust the height setting of your iframe code:

<iframe id="JotFormIFrame-71455031507146" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.us/71455031507146" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>

Please increase the height by adjusting the height setting on the style attribute to somewhere around 1100px.

Thanks.

That works great!  Thanks for the help.

Thank you for keeping us posted, wally44. We're glad that the solution worked. 

Feel free to let us know if you have other questions or concerns. 

Warm regards :)