Search code examples
javascriptjqueryjquery-uijqgrid

jqGrid: how to change cell padding

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:

  1. add padding with CSS. eg. #grid-id td, #grid-id th { padding:10px; }
  2. set 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?

Solution

  • 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.