Abu Ghufran asked 10 years ago
The font on the grid is pretty small. Anyway I can make it bigger? It will provide better experience with tablets and mobile devices.
Abu Ghufran answered 10 years ago
Following on-page styles will increase font-size to 14px (overriding the base css).
This inclues grid font, dialogs and toolbar.
<style>
.ui-jqgrid body, .ui-jqgrid .ui-jqgrid-pager, ,ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button
{
font-size:14px;
}
.ui-jqgrid tr.jqgrow td
{
height:30px;
}
</style>
Abu Ghufran answered 10 years ago
An updated solution … includes toolbar icons size (clickable area)
<style>
/* increase font & row height */
.ui-jqgrid *, .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-size:14px; }
.ui-jqgrid tr.jqgrow td { height:30px; }
/* big toolbar icons */
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon { margin: 4px; }
.ui-jqgrid .ui-jqgrid-pager { height: 32px; }
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div { line-height: 25px; }
</style>
Chuck Eglinton answered 9 years ago
This works: /* increase font & row height */
This doesn't /* big toolbar icons */
Abu Ghufran answered 9 years ago
Use this css:
/* big toolbar icons */
.ui-pager-control .ui-icon, .ui-custom-icon { zoom: 125%; -moz-transform: scale(1.45); }
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div span.ui-icon { margin: 0px 2px; }
.ui-jqgrid .ui-jqgrid-pager { height: 28px; }
.ui-jqgrid .ui-jqgrid-pager .ui-pg-div { line-height: 25px; }
I added zoom option, although not perfect but may serve the need.
