I would like to make the configurable list widget responsive on mobile devices

  • Profile Image
    tassy77
    Asked on January 13, 2017 at 04:27 PM

    Hi,

    I am trying to create an order form processed by Paypal payment Pro.

    This is a train ticket purchase site requiring passengers name and I am trying to modify widget called "Configurable List". My challenge is that I am not able to fit this name entering field into a mobile devises. I played around with CSS but not successful. Would it be possible to assist me on this?  My goal is for user to be able to enter their names and choose the type of ticket.  Other fields such as credit card# and shipping info are perfectly fit in a screen. I have isolated the field that I am referring to on https://form.jotform.com/70126131861952  so that you know what I am talking about. 

    Thank you for your help.

    Taki 

     

     

     
  • Profile Image
    Welvin
    Answered on January 14, 2017 at 01:32 AM

    The configurable list widget is currently not mobile responsive. You need to adjust its layout on mobile devices by custom CSS codes. We can help you get around on this. Just please finish your configurable list widget settings on the main form, let us know its URL after so we can check and help you with the CSS.

  • Profile Image
    tassy77
    Answered on January 15, 2017 at 12:45 AM
    New response receivedHi Welvin,
    Thank you for your quick reply.
    Here is my main form URL. Please take a look.
    https://form.jotform.com/60218541423952
    Thank you
    Taki
    ...
  • Profile Image
    Welvin
    Answered on January 15, 2017 at 02:18 AM

    I am now looking into this. I'll let you know. 

  • Profile Image
    Welvin
    Answered on January 15, 2017 at 02:44 AM

    Please check now and let me know if you like it or not. I did this by doing the following:

    1. Injected the following custom CSS codes in the form:

    @media only screen and (max-device-width: 768px) {

    iframe#customFieldFrame_40 {

    width: 100% !important;

    }

    }

    2. Injected the following custom CSS codes in the widget:

    @media only screen and (max-device-width: 768px) {

        table,

        tbody,

        th,

        td,

        tr {

            display: block;

        }

        tr {

            margin-bottom: 10px;

        }

        td {

            border: none;

            position: relative;

            padding-left: 50%;

        }

        td:before {      

            position: absolute;      

            top: 6px;

            left: 6px;

            width: 45%;

            padding-right: 10px;

            white-space: nowrap;

        }

        

        td:nth-of-type(1):before {

            content: "Type";

        }

        td:nth-of-type(2):before {

            content: "First Name";

        }

        td:nth-of-type(3):before {

            content: "Middle";

        }

        td:nth-of-type(4):before {

            content: "Last Name";

        }

        td:nth-of-type(5):before {

            content: "Class";

        }

        td:nth-of-type(6):before {

            content: "Duration";

        }

        #list > tbody > tr:nth-child(1) {

            display: none;

        }

        td.buttonsColumn {

            margin-bottom: 10px;

        }

    }

  • Profile Image
    tassy77
    Answered on January 15, 2017 at 03:45 AM
    New response receivedHi Welvin,
    Great, that works perfect!
    I have another widget that I have struggle to modify.
    Can you please take a look into the shipping option in the Paypal payment wizard?
    It gives me only one shipping option but I want to be able to choose from the following options.
    Option1: $3.00 3 to 5 business days by USPS
    Option2: $18.00 2 business days by FedEx
    Option3: $27.00 Overnight by FedEx
    Your advice would be highly appreciative.
    Thank you!
    Taki
    Here is the screen shot.
    ...
  • Profile Image
    Welvin
    Answered on January 15, 2017 at 05:07 AM

    I have moved the Paypal issue to a new thread. I will address you there instead. Here's the link: https://www.jotform.com/answers/1034837

  • Profile Image
    MartinCo
    Answered on March 18, 2017 at 11:52 PM

    Hi, I was trying to use the code for my configurable widget but it's not responsive on mobile screens, can you please suggest an appropriate CSS for that: form link https://form.jotform.me/70745086704459

     

    Many thanks

  • Profile Image
    Welvin
    Answered on March 19, 2017 at 09:43 AM

    @MartinCo: I have created a new thread for your inquiry. Here's the link: https://www.jotform.com/answers/1095606