Question

我有一个jqGrid，当它自己显示在页面上时可以正常工作。

如果我尝试在jQueryUI选项卡中显示相同的网格，它仍然可以正常工作 - 除了字体大小错误。发生了什么事：

如果所有内容都在独立页面上运行，则会按如下方式选择字体大小：

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;
}

当网格放在jQueryUI选项卡howerver中时，它被更高优先级的CSS命令覆盖，如下所示：

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;
}

换句话说，我在另一个ui-widget中有一个ui-widget这一事实覆盖了所需的字体说明符。

我怎样才能避免这种压倒一切？

我在here找到了同样的问题而没有任何答案。

任何帮助将不胜感激......

Answer 1

ui.jqgrid.css具有以下定义

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

因此，如果您将类“ui-jqgrid”添加到包含选项卡的div中，问题将得到解决：

<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>

在上面的示例中，将使用带有两个选项卡的div：一个带有一些常规信息，另一个带有id =“grid”。

一个更简单的方法就是设置

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

哪个集合会将页面的默认字体大小（1em）减少到jqGrid使用的（11px）。

请参阅the resent question中的其他方法。

在jQueryUI选项卡中使用jqGrid时字体大小错误

1 个答案: