jQuery Grid Plugin - jqGrid - Topic: setting font-size in ui.jqgrid.css

tony on setting font-size in ui.jqgrid.css

Tue, 12 Jun 2012 08:45:49 +0300

Oleg,

You are right. Fixed.

Tony

OlegK on setting font-size in ui.jqgrid.css

Mon, 11 Jun 2012 18:47:58 +0300

Tony,

I agree, that the usage of em instead of px would have many advantages. I am afrade that the changes can be not so simple. One have to change many height, margin and padding settings (but not all because in some situations icons with fixed pixel size are used).

My suggesting was about the first small step to improve CSS which uses jqGrid. jqGrid use not only own styles, but also jQuery UI CSS framework. So have have to take in consideration the standard jQuery UI CSS.

The line

.ui-jqgrid {position: relative; font-size:11px;}

from ui.jqgrid.css set font-size on the gbox. On the other side gbox div uses ui-widget ui-widget-content ui-corner-all classes too. Because of usage of ui-widget the above setting of font-size:11px; will be ovewritten by

.ui-widget .ui-widget { font-size: 1em; }

if jqGrid will be used inside of some jqGrid widget like jQuery UI Tab or Dialog. So one have to implement some kind of fix. The changes in ui.jqgrid.css, which I suggest will solve the problem.

To be exactly ui.jqgrid.css has already the parts with

.ui-jqgrid .loading { ... }
.ui-jqgrid .ui-jqgrid-pager { ... }
.ui-jqgrid .ui-jqgrid-view { ... }

So I suggest just to remove the setting of font-size:11px; from the

.ui-jqgrid {...}

in the parts .ui-jqgrid .loading { ... }, .ui-jqgrid .ui-jqgrid-pager { ... } and .ui-jqgrid .ui-jqgrid-view { ... }.

I thnk that the small chage will make no side effects.

Later one can make more changes in ui.jqgrid.css and replace the most parts with px to em. I would find this very good, but I find it such changes more complex as what I suggested.

Best regards
Oleg

tony on setting font-size in ui.jqgrid.css

Mon, 11 Jun 2012 18:25:59 +0300

Hello Oleg,

Sorry.

Here we are

Link1

and

Link2

OlegK on setting font-size in ui.jqgrid.css

Mon, 11 Jun 2012 18:12:38 +0300

Sorry, Tony, but the links which you posted can't be read.

tony on setting font-size in ui.jqgrid.css

Mon, 11 Jun 2012 18:07:14 +0300

Hello Oleg,

Thank you, but reading this:

http://filamentgroup.com/lab/u.....to_em_con/

and this

http://filamentgroup.com/lab/r....._archived/

I'm not sure that we shuld change the css this way

Regardas

OlegK on setting font-size in ui.jqgrid.css

Mon, 11 Jun 2012 11:11:18 +0300

Hello Tony,

There are some common problem with the font size in case of usage jqGrid inside of other jQuery UI widget. The following

.ui-widget .ui-widget { font-size: 1em; }

CSS used in jQuery UI CSS ovewrites the CSS setting

.ui-jqgrid {position: relative; font-size:11px;}

used in ui.jqgrid.css.

My suggestion is to replace above line which set font-size for gbox to the following three lines

.ui-jqgrid .loading { font-size: 11px; }
.ui-jqgrid .ui-jqgrid-pager { font-size: 11px; }
.ui-jqgrid .ui-jqgrid-view { font-size: 11px; }

In the case the results will be the same as before, but the rule .ui-widget .ui-widget { font-size: 1em; } make no problems.

The setting of font-size for .ui-jqdialog already exist separately so one don't need to add it as the 4-th rule.

See demo example and some detailes in the answer.

Best regards
Oleg