Configurable list and mobile responsive

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

  • Profile Image
    EltonCris
    Answered 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
    jonathan
    Answered 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.