How can I stack the configurable list when on mobile, but have it display differently when on desktop?

  • Profile Image
    HuttonSafetyGroup
    Asked on February 12, 2021 at 02:45 PM

    Hey there,

    Right now in my form: https://form.jotform.com/200024794080245, I have a configurable list labelled "meeting topics".

    I'm looking for a way to display it differently when the form is being used on a desktop or ipad, as opposed to a. phone. Is that possible?

    When it's on a phone, it'll likely need to be displayed stacked on top of eachother (as it currently is), but ideally it has larger boxes when it's displayed laterally or on a wider screen:

    1613159111_6026dac7eb737_Screen Shot 202

    Can I do this with CSS? or would I be better off to have two configurable lists, use the Hidden Box widget and only display one or the other based on device specs?

  • Profile Image
    Sigit_W
    Answered on February 12, 2021 at 09:08 PM

    Greetings,

    Kindly allow me some time to do some test.

    Regards.

  • Profile Image
    Sigit_W
    Answered on February 13, 2021 at 12:05 AM

    Hi,

    Thank you for your patience.

    Kindly inject the following CSS code in the Form Designer Styles Tab

    iframe#customFieldFrame_37 {
     min-width: 100%!important;
    }

    Related guide: https://www.jotform.com/help/117-how-to-inject-custom-css-codes

    1613192303_60275c6f8cd38_

    Remember to click the Save button.

    Also kindly inject the following CSS code in the Configurable List Widget Custom CSS

    table#list {
     width: 100%!important;
    }
    td.col1>textarea, td.col2>textarea {
    width: 90%;
    }

    1613192475_60275d1b8774e_

    Remember to click the Update Widget button.

    Here's how it looks on mobile

    1613192573_60275d7daa8f8_

    on tablet and desktop

    1613192665_60275dd9a1107_

    Please give it a try, and let us know if you need further assistance.

    Regards.

  • Profile Image
    HuttonSafetyGroup
    Answered on February 16, 2021 at 12:27 PM

    Thanks that works.

    I have been told in the past this is an apple iOS issue, but is there a way to stop the forms from zooming in when you tap on a box to start typing? It zooms in to that specific field and then you have to pinch to zoom back out and navigate over to the next field. Just makes more work.

  • Profile Image
    Basil_A
    Answered on February 16, 2021 at 03:18 PM

    Hi,

    From my understanding that is not possible unless zooming is prevented on the page.

    But could you try to add the CSS code to your form:

    @media screen and (-webkit-min-device-pixel-ratio:0) { 
    select,
    textarea,
    textbox,
    input {
    font-size: 16px;
    }

    Looking forward to your reply.