How to increase grid / toolbar / dialog font size?

QuestionsHow to increase grid / toolbar / dialog font size?
Abu Ghufran asked 7 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.

4 Answers
Abu Ghufran answered 7 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 7 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 6 years ago

This works: /* increase font & row height */

This doesn't /* big toolbar icons */

Abu Ghufran answered 6 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.

Your Answer

0 + 7 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?