Help with the CSS in my Configurable List widget

  • Profile Image
    freedom_migration
    Asked on August 05, 2018 at 06:11 AM

    Hi!

    I'd like to ask help in setting up my Configurable list to make it look neater. I tried looking around in the forums on how to put some fields in another row and I succeeded (somewhat) but it looks aweful!

    My form is here: https://form.jotform.me/82162589102455

    My code is:

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }


    .d {

    display:none;

    }


    .col1 [type="dropdown"] {

        width: 225px;

    }


    tr {

        display: block;

    }


    td.col4 {

        display: block;

        position: relative;

        top: 20px !important;

    }


    td.col5 {

        display: block;

        position: relative;

        top: -18x !important;

        left: 130px !important;

    }


    td.col6 {

        display: block;

        position: relative;

        top: -56px !important;

        left: 307px !important;

    }


    tr {

    display: block;

    }


    td.col7 {

        display: block;

        position: relative;

        top: -20px !important;

    }


    th {

        display: none;

    }


    td.col1:before {

        content:"Relationship to you";

    }


    td.col2:before {

        content:"Surname, Given Name";

    }


    td.col3:before {

        content:"Birth date";

    }


    td.col4:before {

        content:"Relationship Status";

        display: block;

    }


    td.col5:before {

    content:"Year Citizenship granted";

    display: block;

    }


    td.col6:before {

    content:"Country of Citizenship";

    display: block;

    }


    td.col7:before {

    content:"Australian immigration status";

    display: block;

    }

  • Profile Image
    Welvin
    Answered on August 05, 2018 at 10:22 AM

    Here's a more cleaner version of that:

    #list > tbody > tr:first-child { display: none; }

    .mobileColumnName { display: block; }

    td { float: left; }


    To move columns to a new line, use this:

    td.col4, td.col7 { clear: left; } This will move "Relationship Status" 2nd row and "Australian immigration status" to 3rd row.