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

 tr.jqgrow td { padding: 0px 2px 0px !important; }

This will create cell-padding for both header and content cells.

Answer 2

I have found the solution and am a bit ashamed of not finding it sooner :P

Apparently the grid headers ARE th's but not in the same table as the grid itself. So by changing #grid-id th {...} to body .ui-jqgrid .ui-jqgrid-htable th {...} I got it to work as expected.

Answer 3

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.

Answer 4

I solved a similar case by wrapping the content in each cell with a div which I in turn padded. It will give you a correct behavior since the column with stays fixed to your jqgrid configuration.

$("tr.jqgrow td").each(function(){
  $(this).wrapInner("<div class=\"cell\"/>")
})

And styled the div.cell like this (.sass).

table td .cell
  padding-left: 8px
  padding-right: 8px

Answer 5

I finally figured out how to set the padding to the jqGrid th and td properly. This is my solution:

1.Override .ui-jqgrid .ui-jqgrid-htable th div css class

.ui-jqgrid .ui-jqgrid-htable th div { padding: 10px; }

Do NOT add padding to the the .ui-jqgrid .ui-jqgrid-htable th class.

2.After you have done the above, you can adding padding to the jqgrid data row.

.ui-jqgrid tr.jqgrow td{
     height: auto;
     white-space: normal;
     padding: 10px;
}

Answer 6

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