Неправильный размер шрифта при использовании jqGrid на вкладке jQueryUI - PullRequest
1 голос
/ 02 сентября 2011

У меня есть 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, однако, она переопределяется командой 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;
}

Другими словами, тот факт, что у меня есть пользовательский интерфейс внутри другого пользовательского интерфейса, переопределяет спецификатор желаемого шрифта.

Как мне избежать этого переопределения?

Я нашел тот же вопрос в здесь без каких-либо ответов.

Любая помощь будет оценена ...

1 Ответ

3 голосов
/ 02 сентября 2011

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

См. Еще один способ в новый вопрос .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...