Configurable List CSS codes to fit fields into 2 rows

  • Profile Image
    nitetraincoach
    Asked on October 08, 2015 at 11:23 AM

    http://www.jotform.com/answers/595103-Configurable-List-CSS-codes-to-fit-fields-into-2-rows

    I found the forum above which is similar to what I need to do to fit my configurable list in a mobile view. The only issue is I need the full date instead of just the month and year. I have been playing around with it for a while but couldn't figure it out.

    I really like the way the results are submitted now in one row however the input fields need to be responsive for a mobile device. 

    Here is my form: http://form.jotform.us/form/52796185596171

     

    - Matt

     

     

  • Profile Image
    nitetraincoach
    Answered on October 08, 2015 at 12:02 PM

    I found this css that was able to fit the fields across the scree.

     

    @media only screen and (max-device-width:50em){

    table#list {width: 100% !important;}

    textbox, textarea, select{width:100% !important;}

    input[type=text] {width: 100% !important;}

    th {font-size: 10px !important;font-weight: normal !important;}

    }

     

    Is there a way make the fields vertical?

  • Profile Image
    Mike_G
    Answered on October 08, 2015 at 04:12 PM

    I have checked your form using an android phone and the Configurable List widget on your website looks like this: 

    I have cloned your form and added this CSS codes to the Custom CSS tab of the Configurable List widget in your form: 

    .dateContainer{

    display: inline !important;

    }

    #list tr:nth-child(1){

    display: none !important;

    }

    #list{

    width: 350px !important;

    }

    th.col1,th.col2, th.col3, th.col4, th.col5,th.col6, th.col7{

    display: block !important;

    }

    td.col1,td.col2, td.col3, td.col4,td.col5, td.col6,td.col7{

    display: block !important;

    padding-bottom: 8px !important;

    }

    td.col1:before{

    content: "State Name: " !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    td.col2:before{

    content: "Date: " !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    td.col3:before{

    content: "Route NOS: " !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    td.col4:before{

    content: "ODO Reading: " !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    td.col5:before{

    content: "Fuel: " !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    td.col6:before{

    content: "Fuel 2: " !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    td.col7:before{

    content: "Notes: " !important;

    font-weight: bold !important;

    color: #55555A !important;

    }

    td.col1{

    border-top: 2px solid #55555A !important;

    border-top-left-radius: 5px !important;

    border-top-right-radius: 5px !important;

    }

    td.col1,td.col2, td.col3, td.col4,td.col5, td.col6,td.col7{

    border-right: 2px solid #55555A !important;

    border-left: 2px solid #55555A !important;

    }

    td.col7{

    border-bottom: 2px solid #55555A !important;

    border-bottom-left-radius: 5px !important;

    border-bottom-right-radius: 5px !important;

    }

    .add{

    margin-top: 8px !important;

    }

    I have viewed the it from an android phone again, and here's what it looks like on my end: 


    Adding another record results to this: 

    You can view the clone form by clicking this link: https://form.jotform.com/52805221673957

    Please feel free to clone it

    Also, here's a sample email notification after making a test submission with two records entered on the widget.

    I hope this helps. Let us know if you need any further assistance. Thank you.