jqGrid: how to change cell padding

Question

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 ar

Answer 1

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.