CODEWITHSUNDEEP
jqueryjqgrid
argyle
argyle

Reputation: 1339

Setting jqGrid row height below 23px

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

Upvotes: 2

Views: 12002

Answers (2)

muni
muni

Reputation: 1360

Add the following css styles in your jQGrid file as inetrnal style between style tag

<style>
.ui-jqgrid tr.jqgrow td{height:40px;}
</style>

and following link to customize grid height, width, font size and font family.

Upvotes: 1

Oleg
Oleg

Reputation: 221997

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

Look at the demo which displays

enter image description here

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:

enter image description here

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

enter image description here

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.

Upvotes: 5

Related Questions