How do I add Custom CSS for Data Grid widget?

  • Profile Image
    AgilityAssoc.Canada
    Asked on September 08, 2017 at 01:13 PM

    Hi,

    I want to add some custom css code to the Data Grid widget on my form 63423134202946.

    I would like some columns to have centered text. How is this accomplished?

    Regards, Robert

  • Profile Image
    david
    Answered on September 08, 2017 at 01:32 PM

    If you would like to center all the text in the table, add the following CSS directly to the widget:

    td{
    text-align : center;
    }

    Here is how the form would look with the code added:

    https://form.jotformpro.com/72505607152956

    If there are specific elements you want to style, let us know which ones and we will be happy to help.

  • Profile Image
    AgilityAssoc.Canada
    Answered on September 08, 2017 at 02:45 PM

    Hi,

    I have added css and have all centered but I want only some columns centered.

    col1, col3, col4, col6 

    I have changed a fare bit like hiding the up/down options. I would also like th row text centered but it won't.

    /* hide header panel and glyphicon */

    .panel-heading >div , .table-sort, .glyphicon{

     display:none !important;

    }

    /* hide header text */

    .panel-heading, #header-search-span{

    color: #4499ee !important;

    background-color:#4499ee !important;

    }

    /* center all table text, I WANT ONLY SOME COLUMNS TEXT CENTERED */

    .table-striped{

    text-align: center !important

    }

    /* center heading text - NOT WORKING */

     th{

     background-color: #6363A8 !important;

     text-align: center !important;

     float: none !important;

    width:auto 

    }

    /* hide footer text */

    .panel-footer{

     color:  #4499ee !important;

     background-color:#4499ee !important;

    }

     

    Thank you, Regards Robert

  • Profile Image
    AgilityAssoc.Canada
    Answered on September 08, 2017 at 03:26 PM

    Hi,

    Just wanted to update my custom css for the widget.

    #BootstrapDable{border : 8px #4488dd outset !important; border-radius:10pt; padding: -4px }

    .panel-heading >div , .table-sort, .glyphicon { display:none !important; }

    .panel-heading, #header-search-span { color: transparent !important; background-color:#4499ee !important; }

    .table-striped { text-align: center !important }

    th { background-color: #325299 !important; text-align: center !important; float: none !important; border:1.2px #9af solid !important }

    td { border:1.2px #9af solid !important }

    .panel-footer { color: transparent !important; background-color:#4499ee !important; height: 20pt !important; }

    The same issues still apply.

    Thank you, Regards Robert

  • Profile Image
    Welvin
    Answered on September 08, 2017 at 03:41 PM

    I am checking this now. I'll have you the custom CSS codes later. 

  • Profile Image
    Welvin
    Answered on September 08, 2017 at 03:53 PM

    Just in case you've made some new changes, here are the codes on the cloned version of the form that worked based on the styling you want:

    #BootstrapDable {

        border: 8px #4488dd outset !important;

        border-radius: 10pt;

        padding: -4px

    }

    .panel-heading > div,

    .table-sort,

    .glyphicon {

        display: none !important;

    }

    .panel-heading,

    #header-search-span {

        color: transparent !important;

        background-color: #4499ee !important;

    }

    .table-striped {

        text-align: center !important

    }

    th {

        background-color: #325299 !important;

        text-align: center !important;

        float: none !important;

        border: 1.2px #9af solid !important

    }

    td {

        border: 1.2px #9af solid !important

    }

    .panel-footer {

        color: transparent !important;

        background-color: #4499ee !important;

        height: 20pt !important;

    }

     

    th span {

        float: none !important;

    }

     

    table.table.table-bordered.table-striped {

        text-align: left !important;

    }

     

    #BootstrapDable_body > tr > td:nth-child(1) {

        text-align: center !important;

    }

    #BootstrapDable_body > tr > td:nth-child(3) {

        text-align: center !important;

    }

    #BootstrapDable_body > tr > td:nth-child(4) {

    text-align: center !important;

    }

    #BootstrapDable_body > tr > td:nth-child(7) {

        text-align: center !important;

    }

     

    Here's my cloned version of your form: https://www.jotform.com/72506510447957

  • Profile Image
    AgilityAssoc.Canada
    Answered on September 09, 2017 at 09:50 AM

    Hello, Perfect Thank you very much. Regards Robert