How to change the font size in jqGrid?

Question

It is already running with the ui-lightness. How do I change the font size inside the grid?

Please advise.

Thank you.

score 28 · Accepted Answer · answered Dec 17 '09 at 15:46

28

There is an excellent post about this on the jqGrid Forum.

Essentially you can do what Mano suggests and modify the css file directly, or you can create your own in-line style if you need more flexibility. For example:

.ui-jqgrid {font-size:0.8em}

If you do create an inline style you may need to make it more specific to pick up grid rows:

.ui-jqgrid tr.jqgrow td {font-size:0.8em}

answered Dec 17 '09 at 15:46

Justin Ethier

131,333
52
229
284

1

sorry for the late late uptick. better late than never. i even forgotten why i asked that question. weird. hope this helps other people. – Kim Stacks Feb 24 '11 at 15:00

score 6 · Answer 2 · edited Mar 22 '13 at 08:00

6

The very first line in ui.jqgrid.css is this:

 .ui-jqgrid{position:relative;font-size:11px;}

Change the font-size to what you need.

edited Mar 22 '13 at 08:00

Hardik Mishra

14,779
9
61
96

answered Nov 16 '09 at 02:39

Mano

61
1

score 3 · Answer 3 · answered Oct 30 '13 at 20:07

I recently did this for version 4.5.4 of the jqGrid, and had to override more than just the parent .ui-jqgrid selector. In this example, I wanted all text anywhere in the grid to be 12px versus the default of 11px:

/* Bump up the font-size in the grid */
.ui-jqgrid,
.ui-jqgrid .ui-jqgrid-view,
.ui-jqgrid .ui-jqgrid-pager,
.ui-jqgrid .ui-pg-input {
    font-size: 12px;
}

Note that this was done in a separate CSS file, not by directly editing the packaged CSS file.

score 1 · Answer 4 · answered Oct 25 '13 at 19:27

You can also format a specific grid column by referencing it in your custom css by the grid name and use the aria-describedby property to target the specific column. For example:

#Mygrid td[aria-describedby="Mygrid_myspecialcolumnname"] { font-size: 14px; }

You can read more about aria-describedby here: http://www.w3.org/TR/WCAG-TECHS/ARIA1.html

score 0 · Answer 5 · answered Apr 15 '15 at 10:43

0

In the latest version - Guriddo_jqGrid_JS_4.8.2, inorder to change the font style of grid-row elements, just this one change worked for me - in ui.jqgrid.css

.ui-jqgrid tr.jqgroup td {font-weight: bold; font-size: 12px;}

answered Apr 15 '15 at 10:43

dupree

1
1

score 0 · Answer 6 · edited Sep 22 '21 at 18:29

0

Please remove this post - it is related to another product (jsgrid) and the below solution will confuses the users of jqGrid

As of Sept 2021, the method that worked for me is:

.jsgrid table {font-size: XX; }

table {} also works, but for obvious reasons better to be more specific.

Alternately, .jsgrid td, or .jsgrid tr also works

edited Sep 22 '21 at 18:29

Tony Tomov

3,122
1
11
18

answered Sep 21 '21 at 04:31

jackpot

1

Thee question is related to jqGrid not jsgrid, which is quite diffrent – Tony Tomov Sep 21 '21 at 04:45

How to change the font size in jqGrid?

6 Answers6

Linked