CODEWITHSUNDEEP
jquery
Upland
Upland

Reputation: 701

Font sizes in heading/pager of jQuery plugin JGrid

As a new user of jgrid ... and relatively new to jquery, I have come across a problem which I really can't get to the bottom of.

I am having a problem with font sizes within the column headings and pager/footer of my jGrid.

The url where it can be seen is http://www.upland.co.uk/hcs/

I have now corrected the font size in the rows of the grid by adding a class of "ui-jqgrid" to the table itself. But I still have the ongoing issue with CSS of the headings and the pager of the grid.

ie – pager and headings are too large … and pager page number is misplaced. Any advice would be appreciated.

This is viewing in Google Chrome

Thanks

This is what I see in Chrome dev tools:

font-size: 16px;
table - medium                     user agent stylesheet
table - medium                     user agent stylesheet
.ui-jqgrid - 11px                  ui.jqgrid.css:2
.ui-widget - 1.1em                 jquery-ui-1.8.16.custom.css:59
html, body - 75%                   /admin
html, body - 75%                   /admin

(all crossed out apart from the top 2 lines)

Upvotes: 0

Views: 1518

Answers (1)

Terry
Terry

Reputation: 14219

You should use a DOM inspector. Chrome has one built in, you can access it with CTRL+SHIFT+I or by right clicking on an element on the page and going to Inspect Element.

By doing that for example on your table header cells you can see the classes that make the heading are:

class="ui-state-default ui-th-column ui-th-ltr"

So I assume one of those classes has a font size modifier, if not you can force a font to your liking.

Edit: With a bit further investigation it doesn't appear any of those are the culprit. The default webkit (Chrome) font-size is 16px (which is what your TH cells are). Just specify your own size in any of the classes I mentioned above or the th element or ui-jqgrid-sortable which is the class that your clickable column headers use for sorting.

Upvotes: 1

Related Questions