How can we make the Configurable List Widget mobile responsive

  • Profile Image
    agilo
    Asked 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

  • Profile Image
    Jan
    Answered 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
    agilo
    Answered 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
    EltonCris
    Answered 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
    agilo
    Answered 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
    Chriistian
    Answered 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
    Chriistian
    Answered 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
    agilo
    Answered on July 01, 2016 at 11:44 AM

    Ofcourse I did. Works like a charm now :)

  • Profile Image
    liyam
    Answered 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
    mikiscubafreedom
    Answered 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
    liyam
    Answered 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.