How do I add Custom CSS for Data Grid widget?

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

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.

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

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

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

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. 

Hello, Perfect Thank you very much. Regards Robert