CSS code for configurable list

  • Profile Image
    AnnaJordan
    Asked on December 05, 2017 at 07:09 PM

    How can I move each item in my configurable list to a different line?  

    https://www.jotform.com/build/73387065884167

    I would like to have child's name, child's date of birth, and allergies each on a new line. 



  • Profile Image
    Marvih
    Answered on December 05, 2017 at 11:13 PM

    Please add this CSS code into your Configurable List " CUSTOM CSS"

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;


    }

    tr {

         height: 270px!important;

    }

    #list > tbody > tr:first-child {

        display: none;

    }


    td.col1:before {

         content: "Child's Name";

         display: block;

    font-weight: bold;

    }


    td.col2:before {

         content: "Child's Date of Birth";

         display: block;

    }


    td.col3:before {

         content: "Allergies ";

    display: block;

    }

    .col2 {

    float: left!important; 

        top: 70px!important;

        left:-125px!important;

    position: relative;

    font-weight: bold;


    }

    .col3 {

    display:block;

       left: -330px!important;

    float: left;

        top:140px!important;

    position: relative;

    font-weight: bold;


    }

    1512533579150.png


  • Profile Image
    AnnaJordan
    Answered on December 08, 2017 at 10:22 AM

    Thank you!

    The only problem I'm having now is that I cannot see the allergies field at all.  Name and child's date of birth are showing up, however, users cannot see allergies or the textbox to type in.

    https://form.jotform.com/73387065884167

  • Profile Image
    Richie_P
    Answered on December 08, 2017 at 10:41 AM

    I have checked your form and I can see the Allergies label and the textbox clearly.

    You can adjust the label a little by using  my colleagues code and changing the left:330px !important to left:320px!important;