CONFIGURABLE LIST CSS ASSISTANCE NEEDED

  • Profile Image
    lindsayjayecox
    Asked on October 30, 2017 at 04:15 PM

    Hello, my configurable list is too long for my form. I would like the line to be split up so it shows on the line underneath. 


    I would like one line to be:

    Child

    Age

    Age

    Weight

    Height


    and the next line to be:

    Manufacturer, model, how is the child sitting in the seat, has the seat been in accident, and was it purchased used on the next line.


    Also, is there a way to configure it so that the headlines are centered, and to change the font so that it matches the rest of the form?


    The form is a mess right now as I am playing with different options

  • Profile Image
    BDAVID
    Answered on October 30, 2017 at 06:19 PM

    I have had some trouble managing to put the fields in two lines, would you consider having all fields displayed vertically? If you would, please inject the following code: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    th {

        display: none;

    }

    td{

        display: block;

        position: relative;

        margin-left: 0px;

        width: 400px;

    }

    td.col1:before {

    content: "Child Name";

    font-weight: bold;

    margin-right: 300px;

    }

    td.col2:before {

    content: "Age";

    font-weight: bold;

    margin-right: 300px;

    }

    td.col3:before {

    content: "Age";

    font-weight: bold;

    margin-right: 300px;

    }

    td.col4:before {

    content: "Height";

    font-weight: bold;

    margin-right: 300px;

    }

    td.col5:before {

    content: "Weight";

    font-weight: bold;

    margin-right: 300px;

    }

    td.col6:before {

    content: "Car Seat Manufacturer";

    font-weight: bold;

    margin-right: 200px;

    }

    td.col7:before {

    content: "Car Seat Model";

    font-weight: bold;

    margin-right: 300px;

    }

    td.col8:before {

    content: "How is the child sitting in the seat?";

    font-weight: bold;

    margin-right: 100px;

    }

    td.col9:before {

    content: "Has this seat been in any sort of accident? Even Minor?";

    font-weight: bold;

    margin-right: 60px;

    }

    td.col10:before {

    content: "Did your purchase this seat used?";

    font-weight: bold;

    }

    td{

    margin-top: 5px !important;

    margin-bottom: 5px  !important;


    }

  • Profile Image
    lindsayjayecox
    Answered on October 30, 2017 at 06:43 PM
    I would, I just entered that in and it did not change anything.
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    Kevin_G
    Answered on October 30, 2017 at 10:08 PM

    I can see there are some errors in the code you have injected to your widget and it's not the same like my colleague's code. 

    Please remove all the current code of your widget and inject the code as provided by my colleague, this should be the result: https://form.jotform.com/73028767048968 

    Let us know how it goes. 

  • Profile Image
    lindsayjayecox
    Answered on October 30, 2017 at 10:43 PM
    I would, but the way this looks is totally wrong :(
    ...
  • Profile Image
    lindsayjayecox
    Answered on October 30, 2017 at 10:43 PM
    alright, there are 2 COnfigurable lists at the bottom of my page, I would
    like CSS code for both if possible so that it is laid out neatly.
    ...
  • Profile Image
    Nik_C
    Answered on October 31, 2017 at 03:09 AM

    Just to confirm, you want to have this Configurable list widget:

    1509433691Screen Shot 2017-10-31 at 8.11

    Showing the same like this:

    1509433724Screen Shot 2017-10-31 at 8.11

    Please confirm so we can work on it.

    Thank you!

  • Profile Image
    lindsayjayecox
    Answered on October 31, 2017 at 11:43 AM
    yes, although I have deleted it. I don’t want to have to have you guys do it for me overtime I add something. So, on that note…..my form looks fantastic on the computer, but looks like this on mobile. Is there anything I can do to fix it?
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    Nik_C
    Answered on October 31, 2017 at 12:32 PM

    On which phone are you checking your form? 

    I tested on iPhone and it was showing fine.

    We'll wait for your response.

    Thank you!

  • Profile Image
    lindsayjayecox
    Answered on October 31, 2017 at 01:43 PM
    It is the iPhone 7 plus :) I would send a screen shot directly from my phone but its not loading!
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    lindsayjayecox
    Answered on October 31, 2017 at 01:43 PM
    7plus
    ...
  • Profile Image
    Kevin_G
    Answered on October 31, 2017 at 02:41 PM

    I have been checking your form and the Configurable List is not there anymore: https://form.jotform.com/lindsayjayecox/car-seat-check- 

    Did you added the widget to another form? 

    Please post your screenshot following this guide: https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum 

    Note that the forum does not accept attachments through email replies. 

    We will wait for your response. 

  • Profile Image
    lindsayjayecox
    Answered on November 01, 2017 at 01:43 AM
    Hello I am sorry I have been screwing around with this the entire day.
    I finally got the configurable list to look great on the computer, however, it does not fit on the mobile screen appropriately. I don’t want people to have to scroll over to see the rest as I feel they won’t know to do that and will miss portions.
    Here is the link
    https://form.jotform.com/lindsayjayecox/car-seat-check-
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    Nik_C
    Answered on November 01, 2017 at 02:54 AM

    I'll work on this and get back to you as soon as I finish.

    Thank you for your patience.

  • Profile Image
    Nik_C
    Answered on November 02, 2017 at 02:23 AM

    Thank you for your patience.

    Let's please try the below:

    -Add the below code to your Custom CSS Field

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    iframe#customFieldFrame_533 {

        position: relative;

        width: 100%;

        height: 0;

    }

    iframe#customFieldFrame_532{

      position: relative;

        width: 100%;

        height: 0;

    }

    }

    And add the below code to your first Configurable list:

    1509603590Screen Shot 2017-11-02 at 7.23

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px){

    td {


    display: block !important;


    }

    th{display:none;}

    td.col1:before {

        content: "Child's Name";

    }

    td.col2:before {

        content: "Child's Age";

    }

    td.col3:before {

        content: "Child's weight";

    }

    td.col4:before {

        content: "Child's Height";

    }

    }

    And add the below code to your second Configurable list:

    1509603675Screen Shot 2017-11-02 at 7.24

    @media only screen 

    and (min-device-width : 375px) 

    and (max-device-width : 667px){

    td {


    display: block !important;


    }

    th{display:none;}

    td.col1:before {

        content: "Car Seat Manufacturer";

    }

    td.col2:before {

        content: "Car Seat Model";

    }

    td.col3:before {

        content: "Which child sits/will sit in this seat?";

    }

    td.col4:before {

        content: "How does the child sit in this seat?";

    }

    td.col5:before {

        content: "Vehicle this seat will be installed in";

    }

    td.col6:before {

        content: "Vehicle Year";

    }

    td.col7:before {

        content: "Seat ever been in a crash?";

    }

    td.col8:before {

        content: "Seat purchased used?";

    }

    }

    This is how it works:

    1509603738IMG_FCBA03467C4B-1.jpeg

    Please try and let us know how it works.

    Thank you!

  • Profile Image
    lindsayjayecox
    Answered on November 02, 2017 at 09:43 PM
    perfect!!!
    than you so much!!!
    If i add more to it, do i have to do more to the CSS??
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    BDAVID
    Answered on November 02, 2017 at 10:48 PM

    Correct, if you add more field to the configurable list, it will be necessary to apply CSS code to those fields.

  • Profile Image
    lindsayjayecox
    Answered on November 03, 2017 at 10:43 AM
    Thank you. Okay then, since you were so good at this. I added another widget under FINDINGS.
    I need it to not only fit on the page, but also work on mobile devices.
    Where it says DEPARTURE:static, i want that on its own line (to be used as a divider of some sort) and then everything else after that is following departure. Does that make sense?
    Here is the website again:
    https://www.jotform.com/lindsayjayecox/car-seat-check-
    thank you!
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    lindsayjayecox
    Answered on November 03, 2017 at 10:43 AM
    Just by playing around, I was able to get part of it correct on the mobile, until departure, and then it started putting the checkboxes in the wrong spots!
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    Kevin_G
    Answered on November 03, 2017 at 11:08 AM

    Please note that the code may change based on the number of columns your widget has, you will need to basically use the same code shared here and just change the positions of the columns based on how you want it to display. 

    Also, here is a guide with detailed explanation about how to style the widget with CSS codes: https://www.jotform.com/help/456-How-to-Style-Change-the-Layout-and-Customize-the-Configurable-List-Widget 

    I hope this helps. 

  • Profile Image
    lindsayjayecox
    Answered on November 03, 2017 at 11:43 AM
    I did that but it didn’t totally work.
    I also cannot get it to fit on the page on a regular web viewer
    ...
  • Profile Image
    lindsayjayecox
    Answered on November 03, 2017 at 01:43 PM
    Should I send in another request or are you able to assist me with this?
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    Kevin_G
    Answered on November 03, 2017 at 02:02 PM

    I have been working on the CSS code to get your field displayed properly on desktop and mobile devices, please remove all the existing CSS code in your widget and inject this one instead: 

    @media screen and (min-device-width: 480px){


        th {

            display: none;

        }


        tr {

            display: block;

        }


        td[class*="col"]:before {


            font-weight: bold;


            display: block;


        }


        /* Naming the fields*/


        td.col1:before {

            content:"Child Name";

        }


        td.col2:before {

            content:"Vehicle";

        }


        td.col3:before {

            content:"Seat Position in Car";

        }


        td.col4:before {

            content:"CR Manufacturer";

        }


        td.col5:before {

            content:"CR Model Name";

        }


        td.col6:before {

            content:"CR type";

        }


        td.col7:before {

            content:"CR Installed Using";

        }


        td.col8:before {

            content:"History Known?";

        }


        td.col9:before {

            content:"Ever in Crash?";

        }


        td.col10:before {

            content:"Labels Missing?";

        }


        td.col11:before {

            content:"Expired?";

        }


        td.col12:before {

            content:"Recalled?";

        }


        td.col13:before {

            content:"Correct Direction?";

        }


        td.col14:before {

            content:"Harness Correct?";

        }


        td.col15:before {

            content:"Recline Correct?";

        }


        td.col16:before {

            content:"LA Correct?";

        }


        td.col17:before {

            content:"Tether Correct?";

        }


        td.col18:before {

            content:"Seatbelt Correct?";

        }



        td.col19:before {

            content:"ON DEPARTURE";

        }


        td.col20:before {

            content:"Seat Position in Car";

        }


        td.col22:before {

            content:"New Seat Provided?";

        }


        td.col22:before {

            content:"CR Manufacturer";

        }


        td.col23:before {

            content:"CR Model Name";

        }


        td.col24:before {

            content:"CR Installed Using";

        }


        td.col25:before {

            content:"Child/CR Correct";

        }


        td.col26:before {

            content:"CSS/Vehicle Compatibility";

        }


        td.col27:before {

            content:"Educational Materials Given";

        }






        /* Positioning the fields in multiple columns*/


        td.col14 {

            display: block;

            position: relative;

            margin-left: 0px;

        }


        td.col15 {

            display: block;

            position: relative;

            top: -86px !important;

            margin-left: 105px;

        }


        td.col16 {

            display: block;

            position: relative;

            top: -172px !important;

            margin-left: 205px;

        }


        td.col17 {

            display: block;

            position: relative;

            top: -258px !important;

            margin-left: 278px;

        }

         


         td.col18 {

            display: block;

            position: relative;

            top: -344px !important;

            margin-left: 375px;

        }


        td.col19 {

            position: relative;

            display: block;

            margin-top: -324px;

        }

    }



    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){


    /* Hide the original table headers, first row*/

    #list > tbody > tr:nth-child(1) {

    display: none !important;

    }


    /* Force table to not be like tables anymore */

    table, thead, tbody, th, td, tr { 

    display: block; 

    }


    /* Hide table headers (but not display: none;, for accessibility) */

    thead tr { 

    position: absolute;

    top: -9999px;

    left: -9999px;

    }


    tr { 

    border: 1px solid #ccc; 

    margin: 2px 2px;

    }


    td { 

    /* Behave  like a "row" */

    border: none;

    border-bottom: 1px solid #eee; 

    position: relative;

    padding-left: 40%; 

    }


    td:before { 

    /* Now like a table header */

    position: absolute;

    /* Top/left values mimic padding */

    top: 6px;

    left: 6px;

    width: 35%; 

    padding-right: 10px; 

    white-space: nowrap;

    }


    /*

    Re-label the columns here

    */


    td.col1:before {

        content:"Child Name";

    }


    td.col2:before {

        content:"Vehicle";

    }


    td.col3:before {

        content:"Seat Position in Car";

    }


    td.col4:before {

        content:"CR Manufacturer";

    }


    td.col5:before {

        content:"CR Model Name";

    }


    td.col6:before {

        content:"CR type";

    }


    td.col7:before {

        content:"CR Installed Using";

    }


    td.col8:before {

        content:"History Known?";

    }


    td.col9:before {

        content:"Ever in Crash?";

    }


    td.col10:before {

        content:"Labels Missing?";

    }


    td.col11:before {

        content:"Expired?";

    }


    td.col12:before {

        content:"Recalled?";

    }


    td.col13:before {

        content:"Correct Direction?";

    }


    td.col14:before {

        content:"Harness Correct?";

    }


    td.col15:before {

        content:"Recline Correct?";

    }


    td.col16:before {

        content:"LA Correct?";

    }


    td.col17:before {

        content:"Tether Correct?";

    }


    td.col18:before {

        content:"Seatbelt Correct?";

    }



    td.col19:before {

        content:"ON DEPARTURE";

            font-weight: bold;

        text-align: right;

    }


    td.col20:before {

        content:"Seat Position in Car";

    }


    td.col22:before {

        content:"New Seat Provided?";

    }


    td.col22:before {

        content:"CR Manufacturer";

    }


    td.col23:before {

        content:"CR Model Name";

    }


    td.col24:before {

        content:"CR Installed Using";

    }


    td.col25:before {

        content:"Child/CR Correct";

    }


    td.col26:before {

        content:"CSS/Vehicle Compatibility";

    }


    td.col27:before {

        content:"Educational Materials Given";

    }


    }

    You can see the result on this form: https://form.jotform.com/73064754877974 

    Please note that it was a bit hard due to the lengh of your widget, for future widgets I would recommend you to split the widget in order to have a shorten version of it. 


    I hope this helps. 

  • Profile Image
    lindsayjayecox
    Answered on November 03, 2017 at 02:43 PM
    Wow! Thank you!!
    just a few more things….…..the RECALL and CORRECT DIRECTION columns are not showing up, can I have those moved down to the HARNESS CORRECT line???
    Lastly, I would like to add UPON ARRIVALS: static: as the first column (used as a divider as well, the same as ON DEPARTURE), would this totally screw up everything?
    Also, one day they need to make this easier for us layman people :)
    THANK YOU!!
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    lindsayjayecox
    Answered on November 03, 2017 at 02:43 PM
    Oh also, it looks like at the bottom where it says CSS/VEHICLE COMPATABILITY and EDUCATIONAL MATERIALS GIVEN, you are unable to click YES, because the last few letters of the line is overlapping? (on mobile)
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...
  • Profile Image
    BDAVID
    Answered on November 03, 2017 at 03:13 PM

    My colleague Kevin is working on it, he will get back to you soon.

  • Profile Image
    Kevin_G
    Answered on November 03, 2017 at 04:05 PM

    Lindsay, 

    Please go to the code in the widget and replace this part: 

    td { 

    /* Behave  like a "row" */

    border: none;

    border-bottom: 1px solid #eee; 

    position: relative;

    padding-left: 40%; 

    }


    td:before { 

    /* Now like a table header */

    position: absolute;

    /* Top/left values mimic padding */

    top: 6px;

    left: 6px;

    width: 35%; 

    padding-right: 10px; 

    white-space: nowrap;

    }

    With this one: 

    td { 

    /* Behave  like a "row" */

    border: none;

    border-bottom: 1px solid #eee; 

    position: relative;

    padding-left: 40%;

            padding-bottom: 10%;

    }

     

    td:before { 

    /* Now like a table header */

    position: absolute;

    /* Top/left values mimic padding */

    top: 6px;

    left: 6px;

    width: 35%; 

    padding-right: 10px; 

    white-space: normal;

    }

    The result can be seen here: https://form.jotform.com/73064754877974 

    I hope this helps. 

  • Profile Image
    lindsayjayecox
    Answered on November 04, 2017 at 01:43 PM
    Oh this is great! thank you!!!
    Lindsay
    lindsayjayephotography@gmail.com
    248.798.2565
    ...