How to increase jqgrid header checkbox size

Question

Free jqgrid row height and font size is increased using styles from answers from JQgrid set row height and How to make free jqrid font awesome action buttons bigger

/* https://stackoverflow.com/questions/3203402/jqgrid-set-row-height
*/
.ui-jqgrid .ui-jqgrid-htable th {
    height: 2em;
    font-size: 1.2em;
}

.ui-jqgrid tr.jqgrow td {
    height: 2.8em;
}


/*https://stackoverflow.com/questions/28972025/how-to-make-free-jqrid-font-awesome-action-buttons-bigger/
*/
.jqgrow .ui-jqgrid-actions > .ui-pg-div > span {
    font-size: 22px;
}

FontAwesome icon set and checkbox are used. Row selection column checkbox in grid column header is still too small:

How to make row selection column header checkbox to have same size as in rows ?

Update

I created style

#grid_cb {
    padding: 0;
}

#jqgh_grid_cb {
    margin: 0;
    height: 21px;
}

#cb_grid {
    width: 100%;
    height: 100%;
}

but this works for grid which have id grid. How to make it work for other grids also ?

Answer 1

One can implement the requirement in different ways. For example, one can do the following

$("#list_cb").css({padding: 0});
$("#jqgh_list_cb").css({margin: 0, height:"21px"});
$("#cb_list").css({width: "100%", height: "100%"});

in case if the id of the grid is "list". As the result one will get the header like on the picture below:

The result can be a little different in different web browsers (as always in 1px, because of small shadow effects used in some browsers). See the demo.

UPDATED: The same settings as CSS rules are below:

.ui-jqgrid .ui-jqgrid-htable th.jqgh_cbox {
    padding: 0;
}
.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels .jqgh_cbox > div {
    margin: 0;
    height: 21px;
}
.ui-jqgrid .ui-jqgrid-labels .jqgh_cbox > div > .cbox {
    width: 100%;
    height: 100%;
}

See the demo.

If you would use the latest sources of free jqGrid from GitHub then you can reduce the above CSS rules to the following:

.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels .jqgh_cbox > div {
    height: 21px;
}
.ui-jqgrid .ui-jqgrid-labels .jqgh_cbox > div > .cbox {
    width: 100%;
    height: 100%;
}