Home/ Questions/Q 8057285
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T08:59:07+00:00

I have a similar problem to this one . I am using jQueryUI tabs

  • 0

I have a similar problem to this one. I am using jQueryUI tabs to control content on the page, and on some of the tabs I am using jqGrid to display information. The font settings from jqGrid are being overwritten by the larger fonts defined by the tabs. The solution in that example was to define the tab as being of class ui-jqgrid. But they didn’t have anything except the grids under their tabs, so that solution works. How do I override the font settings for just the grid and allow jqGrid to use its own font settings, but retain the settings for everything else under the tab?

You can see here where it is overwriting my jqGrid font size. I tried using a percentage as well, but it just ignored that too.

CSS Calues

UPDATED – CSS Computed Style:
enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are many ways to solve the problem. How you can confirm the way described here works, but it makes other texts to have 11px font which you don’t want.

    The problem with the font is the CSS setting (see here)

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

    Because both Tab and jqGrid have the class "ui-widget" the setting overwrite the font setting from the jqGrid.css (see here):

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

    As the result you have the picture like on the demo:

    enter image description here

    jQuery UI uses em style. So you can for example include in the CSS of your page the following

    html, body { font-size: 75% }

    (see here). In the case you will have the following results (see the demo):

    enter image description here

    By the way the documentation of jqGrid suggest indirectly (see example of HTML page here). I understand that it could be situations where you want don’t change the size of other fonts on the page.

    In the case you can use for example

    .ui-jqgrid { font-size: 11px !important; }

    or alternatively the following

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

    The results of the approach you can see on the next demo:

    enter image description here

    If I understand you correct it’s the results which you want to have.

    UPDATED: If you use Developer Tools of Chrome you can see the same information as in IE Developer Tools to locate the CSS style which overwrite font-size of jqGrid. For example in my first demo you will see

    enter image description here

    So if in your application my above suggestions not work you should examine the effective CSS styles aplied to any grid cell and find which CSS setting overwrite CSS of jqGrid.

    UPDATED 2: From the link which you send me per email I could see that the problem exist because you forgot to include any <!DOCTYPE html ...> declaration before <html>. So the web browser interpret your page as very old style HTML written in the time before even HTML 3.2 was published (before 1997). It’s so named Quirks mode.

    To solve the problem you should include before <html> the line like

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    or just

    <!DOCTYPE html>

    (HTML5 standard). Moreover I strictly recommend you to validate your HTML pages in some HTML valirador like http://validator.w3.org/. You current code is a mix between HTML and XHTML which is not good.

    UPDATED 2: I posted additionally the feature request where I suggest to stop creating of jqGrid in case of document.documentMode <= 5, so in case of usage Quirks mode (no <!DOCTYPE html ...>).

    UPDATED 3: Based on the question/answer I posted two suggestions to trirand: this and this. Both suggesting was accepted and are the parts of jqGrid now (see here and here). So the user of the next version should don’t have the described problem.

    • 0