What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can we make the Configurable List Widget mobile responsive

    Asked by agilo on June 30, 2016 at 07:36 AM

    How can we make the Configurable List Widget responsive to fit a mobile phone?



    This is a re-post of a comment on How to Set Up the Configurable List Widget

    configurable list config list responsive config
  • Profile Image
    JotForm Support

    Answered by Jan on June 30, 2016 at 09:08 AM

    This is the form you're working to right? (https://www.jotformeu.com/form/61812068829361).

    I was able to replicate the issue. I can see that the "Make form responsive" option is already enabled.

    Please insert the Mobile Responsive widget in your form. This will make the Matrix table field responsive.

    Here's the result:

    Hope that helps. Thank you.

  • Profile Image

    Answered by agilo on June 30, 2016 at 09:14 AM

    Not the matrix. I need the Configurable List Widget to scale, which it does not. I assume this is because the widget generates the list as a table and does not use CSS for positioning. How can we fix this?

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 30, 2016 at 10:44 AM

    You're right about it. Table is just a bit complex when making it fully mobile responsive but it is doable.

    Here's how to make your config lists mobile responsive.

    1. First, inject this CSS codes to your form.

    @media screen and (max-width:480px){

    iframe {

        width: 100% !important;

    }}

    This will set a responsive width to all iframe elements including framed widgets like config list.

    2. Inject this CSS codes to each of your config list widget properties under CSS tab.

    You can get the full CSS codes here: http://pastebin.com/raw/0d6CHEy6

    Here's a visual guide:

    Note that this only applies to your config list widgets with the 3 fields (first screenshot). If you want to apply it to your other config list widgets, you need to change the label found on the CSS codes.

    Here's how they look on mobile afterwards.

    If you need further assistance, let us know.

  • Profile Image

    Answered by agilo on July 01, 2016 at 08:43 AM

    I am unable to get this working. I've now added the code to the form and the first Configurable List. But this is not reflected on a mobile device.

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 01, 2016 at 11:20 AM

    I am currently checking your form. Please allow me to check this further. I will get back to you as soon as I find the solution to the issue. 

  • Profile Image
    JotForm Support

    Answered by Chriistian on July 01, 2016 at 11:34 AM

    I checked your form and I noticed that you have added a comment on the CSS code but using the doubles slash (//). Custom CSS code comment uses only /* Comment Here */ syntax. 

     

    Can you please try to add the comment to the CSS code like this /*Make Configurable Lists responsive*/? You can also check this sample clone form that I used for testing: https://form.jotform.com/61824213021946.

  • Profile Image

    Answered by agilo on July 01, 2016 at 11:44 AM

    Ofcourse I did. Works like a charm now :)

  • Profile Image
    JotForm Support

    Answered by liyam on July 01, 2016 at 12:55 PM

    Thanks for keeping us posted, agilo. We're glad the solutions provided by the team solved the issue.

    If you have other questions or concerns, please do let us know.

    Thanks.

  • Profile Image

    Answered by mikiscubafreedom on July 17, 2016 at 11:35 PM

    I have the same problem. i am not really familiar with CSS but managed to layout on PC. But on mobile phones it is useless as not all field show up. Please help!!!

    https://form.jotform.co/61896419541869

  • Profile Image
    JotForm Support

    Answered by liyam on July 18, 2016 at 01:21 AM

    Hello mikiscubafreedom,

    I have moved your question to another thread in order for us to be able to assist you better. We'll provide you answer to your concerns there.

    Thanks for your understanding.