1

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:

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 ?

Community
  • 1
  • 1
Andrus
  • 26,339
  • 60
  • 204
  • 378

1 Answers1

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:

enter image description here

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%;
}
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thank you. How add this to css file so that it works for grids with id other that list also ? I updated question. – Andrus Nov 24 '15 at 08:34
  • @Andrus: You are welcome! I updated my answer too. See **UPDATED** part. – Oleg Nov 24 '15 at 09:01
  • I tried this with jqgrid from github. Selection checkboxes in start of every row are smaller than increased checkbox in header as shown in image in answer. How to increase checkbx sizes in start of row also so that they have same size as increased header checkbox ? – Andrus Feb 20 '16 at 23:59
  • @Andrus: Sorry, but I can't update all more as 4000 old answer to work with the latest free jqGrid version. The old answer shows which CSS rules can be used (`.ui-jqgrid .ui-jqgrid-htable .ui-jqgrid-labels .jqgh_cbox > div` and `.ui-jqgrid .ui-jqgrid-labels .jqgh_cbox > div > .cbox`) you should compare the CSS settings in the old demo with the new one to identify the changes which you need to overwrite additionally to have the look which you want. – Oleg Feb 21 '16 at 11:07
  • @Andrus: If you would have problems you should post new question were you describe the problem clear enough. Which demo you mean (the answer contains two demos), which `iconSet` and `guiStyle` you use, which CSS you includes (only jQuery UI, only Bootstrap CSS or both) and in which versions and so on. You should include the pictures which demonstrates the changes, which you want to eliminate. By the way all checkboxes and the many other components displayed with `guiStyle: "bootstrap"` are larger as before. – Oleg Feb 21 '16 at 11:12