在jQueryUI标签中使用jqGrid时字体大小错误 [英] Wrong font size when using jqGrid inside jQueryUI tab

问题描述

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

当一切都在独立页面上工作时，字体大小如下：

 继承自div＃gbox_datatable.ui-jqgrid.ui-widget.ui-widget-content.ui-corner-all，在文件ui.jqgrid.css第2行
 .ui-jqgrid {
 font-size：11px; 
} 
  

当网格放置在jQueryUI选项卡中时，更高优先级的CSS命令如下：

 从div继承：gbox_datatable.ui-jqgrid.ui-widget.ui-widget- content.ui-corner-all，在文件jquery-ui-1.8.9.custom.css line 60 
 .ui-widget .ui-widget {
 font-size：1em; 
} 
  

换句话说，我有一个ui-widget在另一个ui

我发现了同样的问题在这里没有任何答案。

任何帮助都会感激...

解决方案

ui.jqgrid.css 有以下定义

  .ui-jqgrid {position：relative;因此，如果你添加类ui-jqgrid到div中，那么我们可以使用ui-jqgrid保持选项卡的问题将得到解决：
 < div id =tabsclass =ui-jqgrid> 
< ul> 
< li>< a href =＃results>结果< / a>< / li> 
< li>< a href =＃log>软件< / a>< / li> 
< / ul> 
< div id =resultsclass =tabcontain>< / div> 
< div id =logclass =tabcontain> 
< table id =grid>< tr>< td>< / td>< / tr>< / table& 
< div id =pager>< / div> 
< / div> 
< / div> 
 
在上面的示例中，将使用带两个选项卡的div：一个带有一些常规信息，另一个带有
 <$> 
 c $ c> html，body {font-size：75％; } 
  
这将设置将页面的默认字体大小（1em）减少到jqGrid使用11px）。
 
 
 
请参阅重新发送问题。
 
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...
解决方案
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.

                        
这篇关于在jQueryUI标签中使用jqGrid时字体大小错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！