Confirubale List: How to make fields appear spread out in several rows

  • Profile Image
    tc_itpmo
    Asked on January 13, 2017 at 06:46 AM

    I wanted to have the questions in 4 rows   and have injected the .css from the forum group.

     

    My plans was to have :

    Row 1: Project Name

    Row 2: Description

    Row 3: Key Acomplishments, Key Challenges

    Row 4:  Key learnings , Future plans

     

    Unfortunately it doesn't work.

    Please help .

    Thanks

  • Profile Image
    Boris
    Answered on January 13, 2017 at 07:36 AM

    I see that the CSS code you were using is this:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }
    th { display: none;}
    #list {
    counter-reset: counter -1;
    }

    #list tr:after {
    content: counter(counter);
    counter-increment: counter;
    display: inline-block;
    width: 10px;
    font-size: 18px;
    margin-right: 5px;
    margin-left: 5px;
    text-align: right;
    color: #FF8112
    }

    td.col1, td.col2, td.col3, td.col4, td.col5,td.col6,td.col7{
        display: inline-block;
        width: 350px;
        float: left;
    }
    .col1 textarea {width:500px;resize:vertical; height: 50px}
    .col2 textarea {width:500px;resize:vertical;height: 100px}
    .col3 textarea {width:500px;resize:vertical;height: 100px}
    .col4 textarea {width:500px;resize:vertical;height: 100px}
    .col5 textarea {width:500px;resize:vertical; height: 100px}
    .col6 textarea {width:500px;resize:vertical;height: 100px}
    .col7 textarea {width:500px;resize:vertical;height: 100px}

    input[type="text"], select, .stepper-wrap input.stepper { width: 90%; }

    td.col1:before {   clear: left;content: "Project";width:250px;}
    td.col2:before { clear: left;content: "Description";width: 250px; }
    td.col3:before {  clear: left;content: "Key Achievement"; width:250px; height:250px}
    td.col4:before {clear: left;content: "Key Challenges"; width: 250px;}
    td.col5:before { clear: left;content: "Key Learnings"; width: 250px;}
    td.col6:before { clear: left;content: "Future Plans";width: 250px; }
    td.col7:before { clear: left;content: "Future improvements"; width: 250px;}


    /* Positioning the fields in multiple columns*/
    #list tr td {
        padding-top: 5px;
    }
    #list tr:nth-child(odd) {
        background-color: lightblue;
    }
    #list tr:nth-child(even) {
        background-color: lightyellow;
    }

    Please try using the following full custom CSS instead:

    .checkbox, .radio {
    margin: 3px 0;
    min-width: 70px;
    }
    th { display: none;}
    #list { counter-reset: counter -1; }
    #list tr:after {
    content: counter(counter);
    counter-increment: counter;
    display: inline-block;
    width: 10px;
    font-size: 18px;
    margin-right: 5px;
    margin-left: 5px;
    text-align: right;
    color: #FF8112
    }

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6 {
        display: inline-block;
        width: 99%;
        float: left;
        margin: 0;
        padding: 5px 0 0 1%;
    }
    td.col3, td.col4, td.col5, td.col6 { width: 48%; }
    td.col3, td.col5 { margin-right: 2%; }


    textarea { resize:vertical; width: 100%; height: 100px; }
    .col1 textarea { height: 50px; }

    input[type="text"], select, .stepper-wrap input.stepper { width: 90%; }

    td.col1:before { clear: left; content: "Project"; }
    td.col2:before { clear: left; content: "Description"; }
    td.col3:before { clear: left; content: "Key Achievement"; }
    td.col4:before { clear: left; content: "Key Challenges"; }
    td.col5:before { clear: left; content: "Key Learnings"; }
    td.col6:before { clear: left; content: "Future Plans"; }
    td.col7:before { clear: left; content: "Future improvements"; }

    /* Positioning the fields in multiple columns*/
    #list tr td {
        padding-top: 5px;
    }
    #list tr:nth-child(odd) {
        background-color: lightblue;
    }
    #list tr:nth-child(even) {
        background-color: lightyellow;
    }

    Your Configurable List will end up looking like this, which is what I believe you were trying to achieve:

    Please try it out, and let us know should you need further assistance.