Question

I know there are questions on here about how to set row height. I have read them and done what they suggest, but none of them actually solve the problem I want to solve. My users want to see more data on the grid at once. So, I tried to change row height to something like 15px.

jqGrid ignores any row height lower than 23px. The following code works when the height value passed in is 23 or greater:

self.grid.setRowData(row[self.keyColumn], false, { height: cssRowHeight });

Anything lower, and an inspection of the html shows that the row has a height of 21px and there is a 1px border on top and bottom.

So my question is, how can I set the jqGrid row height to a value lower than 23px?

Thanks,
Jerome

Answer 1

It’s good question! I think it will be interesting for other users.

Look at the demo which displays

I used the following CSS:

.ui-jqgrid tr.jqgrow td { height: 15px; }

The exact results can depends from the other formetters which you use. For example the same grid where the column with formatter: 'checkbox' are visible (see here) looks, especially in IE, not so compact:

It’s in any way compacter as the original grid (see the demo):

If you need reduce the size of rows having comboboxes for example you have to use additional CSS like

.ui-jqgrid tr.jqgrow td { height: 15px; padding-top: 0px;}
.ui-jqgrid tr.jqgrow td input { padding: 0px; height: 11px; width: 11px; }

see here.