Question

I have a jqGrid which works fine when displayed on a page on its own.

If I try to display the same grid inside jQueryUI tab, it still works fine – except that font size is wrong. What is happening is this:

When everything is working on a standalone page, the font size is picked up as follows:

Inherited from div#gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all, in file ui.jqgrid.css line 2
.ui-jqgrid{
    font-size:11px;
}

When the grid is placed inside a jQueryUI tab, howerver, it is overridden by a higher priority CSS command as follows:

Inherited from div#gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all, in file jquery-ui-1.8.9.custom.css line 60
.ui-widget .ui-widget{
    font-size:1em;
}

In other words, the fact that I have a ui-widget inside another ui-widget is overriding the desired font specifier.

How can I avoid this overriding?

I found same question at here without any answers.

Any help will be appreciated…

Answer 1

ui.jqgrid.css has the following definition

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

So if you add class “ui-jqgrid” to the div which holds the tabs the problem will be solved:

<div id="tabs" class="ui-jqgrid">
    <ul>
        <li><a href="#results">Results</a></li>
        <li><a href="#log">Software</a></li>
    </ul>
    <div id="results" class="tabcontain"></div>
    <div id="log" class="tabcontain">
        <table id="grid"><tr><td></td></tr></table>
        <div id="pager"></div>
    </div>
</div>

In the example above div with two tabs will be used: one with some general information and another with the the id=”grid”.

One more simple way will be just set

html, body { font-size: 75%; }

which set will reduce default font size of the page (1em) to the same which jqGrid uses (11px).

See one more way in the resent question.