Configurable List Widget: Field headings are now not bold

  • Profile Image
    tracyalexander
    Asked on March 11, 2016 at 02:06 PM
    only thing is my field headings are now not bold - how can i make them bold
  • Profile Image
    Charlie
    Answered on March 11, 2016 at 02:54 PM

    Hi,

    See if this one gives you a better layout:

    tr {

    display: block;

    width: 800px !important;

    height: 110px !important;

    }

    td.col4 {

        display: block;

        position: relative;

        top: 20px !important;

    }

    td.col5 {

        display: block;

        position: relative;

        top: -18px !important;

        left: 70px !important;

    }

     

    td.col6 {

        display: block;

        position: relative;

        top: -56px !important;

        left: 170px !important;

    }

    td.col7.buttonsColumn {

        display: block;

        position: relative;

        top: -56px !important;

        left: 370px !important;

    }

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

        display: none;

    }

     

    .col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before, .col7:before {

        font-weight: bold;

    }

    td.col1:before {

        content: "Class No";

        display: block;

    }

    td.col2:before {

        content: "Name of Animal";

        display: block;

    }

    td.col3:before {

        content: "Tag No";

        display: block;

    }

     

    td.col4:before {

         content: "AI";

    display: block;

    }

    td.col5:before {

        content: "AI Class";

    display: block;

    }

    td.col6:before {

        content: "Name of Sire (If In AI Section)";

    display: block;

    }

    button.add {

        position: relative;

        top: 10px !important;

    }

     

    That should give you a proper layout of the fields in two lines and gives you a bold heading. 

    This is how it looks like:

     

    Let us know if that works.