I'm using jqGrid3.6.5 on google hosted jQueryUI1.8.2 and jQuery1.4.2
I want to change the cell padding of a jqGrid. For testing purposes I want to set it to 10px all around each cell.
The only option I've come across while googling is the following:
#grid-id td, #grid-id th { padding:10px; }
cellLayout
option to 21 (paddingleft + paddingright + borderleft)When I have no set width on any of the columns in my colModel, this works like expected. Though when I resize one of the headers, or set a column width in the colModel, headers and cells aren't aligned anymore.
Anyone know how to fix this or know an alternative way to alter cell padding?
Add a new CSS class to the columns that you need to style:
$("#dataTable").jqGrid({
...
colModel:[
{name:"name",index:"name", width:600, align:"left", classes:"grid-col"},
{name:"price",index:"price", width:100, align:"right", classes:"grid-col"}
],
...
});
Note classes:"grid-col"
in this snippet.
Then style the columns with CSS using !important
to give these rules the highest priority:
.grid-col {
padding-right: 5px !important;
padding-left: 5px !important;
}
It works for me in jqGrid 4.5.4 with no column resizing problems.
According to the jqGrid developer, the cellLayout
option is the preferred way. Unfortunately the documentation is a bit cryptic:
This option determines the padding + border width of the cell. Usually this should not be changed, but if custom changes to td element are made in the grid css file this will need to be changed. The initial value of 5 means paddingLef⇒2+paddingRight⇒2+borderLeft⇒1=5
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With