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

    Configurable list and mobile responsive

    Asked by tracyalexander on May 24, 2017 at 04:24 PM

    The fields to the far right of my form in configurable lists do not show on mobile phones even though i have added the mobile responsive widget to my form.

     

    Example

    Horse sections - Horse and Pony Ridden - you can not see the horse name field

    Page URL:
    https://eu.jotform.com/build/70951790799373

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 24, 2017 at 05:56 PM

    The mobile responsive widget only affects the regular fields. It can't make the fields within a widget mobile responsive. However, since each widget has their own custom CSS settings, you can inject custom CSS codes to each of them to make them mobile responsive.

    You can use the following CSS codes.

    Important: You must inject this CSS codes within the widget settings under custom CSS tab. But before doing so, you must first modify the labels (mark in bold below) according to the field where you're injecting the code.

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

    .checkbox, .radio {margin: 3px 0; min-width: 70px; } div#listContainer {background: #fff; } th{display:none;} td {float: left; margin: 0 !important; display: block; min-height: 40px; } td:before{display:block} input[type=text], select, textarea{box-shadow:none; border-radius:0; padding:4px; } td[class*="col"]:before {width: 30%; float: left; } td {max-width: 620px; width: 100% !important; } td [name="input"], td > select, textarea{width: 68% !important; box-sizing: border-box; } img.calendarIcon {display: none; } .radio {width: 50%; float: left; } .buttonsColumn {min-height: 30px; } textarea {min-height: 120px; } .buttonsColumn {text-align: right; } table {border-collapse: collapse; } #list tbody > tr + tr + tr {margin-top: 22px; border-top: 1px solid #ccc; box-shadow: 1px 0 0 #ccc; } #list tbody tr td:first-child{padding-top:20px !important; }

    td.col1:before {

        content: "Class No";

    }

    td.col2:before {

        content: "Name of Horse";

    }}

    This is how the configurable list widget would look like on mobile afterward.

    Hope this helps!

  • Profile Image
    JotForm Support

    Answered by jonathan on May 29, 2017 at 05:05 PM

    If you responded lately to this thread, we were not able to see it.

    Please retry replying again using this link https://www.jotform.com/answers/1153897

    Thanks.