How to Change the Font Size in Jqgrid

How to change the font size in jqGrid?

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}

How to change font size and other style of jqgrid 4.15

Since no one answered here, I resolved this by using the below code:

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

.ui-jqgrid .ui-th-column > div.ui-jqgrid-sortable {
font-size: 15px;
}

span.ui-jqgrid-cell-wrapper {
font-size: 16px;
}

td.jqgrid-rownum {
font-size: 15px;
}

jQuery jqGrid Change The Font Size For Only The Caption On This Page

What @SOS write is absolutely correct.

In your case it is just this line

#gview_data_grid_display .ui-jqgrid-caption {
    font-size:  15px;
}

Note the gview_ prefix

How to change the font, font size, and font color in JQ Grid?

The exact changes could depend on version of jqGrid and the fork which you use. Ch make the changes which you asked you should use CSS like

.ui-jqgrid {
    font-family: Arial;
}
.ui-jqgrid > .ui-jqgrid-view {
    font-size: 12px;
}
.ui-jqgrid .ui-jqgrid-hdiv .ui-jqgrid-labels .ui-th-column {
    color: blue;
}

If you use filterToolbar then you should need to add

.ui-jqgrid > .ui-jqgrid-view input,
.ui-jqgrid > .ui-jqgrid-view select,
.ui-jqgrid > .ui-jqgrid-view textarea,
.ui-jqgrid > .ui-jqgrid-view button {
    font-size: 12px;
}

additionally. After changing the font size you could want to change some padding values used in the grid.

The demo uses free jqGrid 4.9 and it set red color instead of blue to display the results more clear on jQuery UI Theme which I use.

How to change free jqfrid font size of toolbar search box

The corresponding CSS rules can be the following

.ui-jqgrid  .ui-search-toolbar .ui-search-table {
    font-size: 1.2em;
}
.ui-jqgrid .ui-search-toolbar input,
.ui-jqgrid .ui-search-toolbar select {
    font-size: 1.2em;
}

The first rule set the font size of searching operations and the clear character ("x") and the second rule set the font size of the input and select elements of the searching toolbar.

How to increase font size and element height if free jqgrid form edit

Try to use

.ui-jqgrid .ui-jqdialog {
    font-size: 16px;
}

to increase/change the font size of the body of the edit dialogs (and other dialogs of jqGrid).

If you want don't change the font of buttons of the dialog form and need to set the font only on the top pato of the dialog with the Edit form then you can use the following selector instead

.ui-jqgrid .ui-jqdialog .FormGrid {
    font-size: 16px;
}

To change the font of the title bar you can use CSS selector .ui-jqdialog .ui-jqdialog-titlebar for example.

---

Related Topics