Configurable list and mobile responsive

  • tracyalexander
    Asked on May 24, 2017 at 4: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

  • Elton Support Team Lead
    Replied on May 24, 2017 at 5: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.

    Configurable list and mobile responsive Image 1 Screenshot 20

    Hope this helps!

  • jonathan
    Replied on May 29, 2017 at 5: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.