2012-06-07 2 views
2

У меня проблема с this one. Я использую вкладки jQueryUI для управления контентом на странице, а на некоторых вкладках я использую jqGrid для отображения информации. Настройки шрифта из jqGrid переписываются большими шрифтами, определяемыми вкладками. Решение в этом примере состояло в том, чтобы определить вкладку как класс ui-jqgrid. Но у них не было ничего, кроме гридов под их вкладками, так что решение работает. Как переопределить параметры шрифта только для сетки и позволить jqGrid использовать собственные настройки шрифта, но сохранить настройки для всего остального под вкладкой?Настройки шрифта jqGrid, переписанные настройками вкладки jQueryUI

Здесь вы можете увидеть, где он меняет размер шрифта jqGrid. Я также попытался использовать процент, но он просто проигнорировал это.

CSS Calues

ОБНОВЛЕНО - CSS Компьютерный Стиль: enter image description here

ответ

3

Есть много способов решить эту проблему. Как вы можете подтвердить описанный способ here, но в других текстах есть шрифт 11px, который вы не хотите.

Проблема со шрифтом является настройка CSS (см here)

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

Так как Tab и jqGrid имеют класс "ui-widget" параметр перезаписывает настройки шрифта из jqGrid.css (см here):

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

в результате у вас есть картина, как на the demo:

enter image description here

jQuery UI использует em стиль. Таким образом, вы можете, например, включить в CSS вашей страницы следующий

html, body { font-size: 75% } 

(см here). В случае, если вы будете иметь следующие результаты (см the demo):

enter image description here

Кстати документация jqGrid предложить косвенно (см пример HTML страницы here). Я понимаю, что это могут быть ситуации, когда вы хотите, не изменять размер других шрифтов на странице.

В случае, если вы можете использовать, например

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

или в качестве альтернативы следующие

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

Результаты подхода вы можете увидеть на the next demo:

enter image description here

Если я понимаю, что вы это исправите результаты, которые вы хотите получить.

ОБНОВЛЕНО: Если вы используете инструменты разработчика хромовых вы можете увидеть ту же информацию, как и в IE Developer Tools, чтобы найти стиль CSS, который перепишет font-size из jqGrid. Например, в my first demo вы увидите

enter image description here

Так что если в вашем приложении мои приведенные выше рекомендации не работают, вы должны изучить эффективные стили CSS aplied к любой ячейке сетки и выяснить, какие CSS настройки перезапись CSS в jqGrid.

ОБНОВЛЕНО 2: От ссылки, которую вы посылаете меня по электронной почте я мог видеть, что проблема существует, потому что вы забыли включить любую <!DOCTYPE html ...> декларации до <html>. Таким образом, веб-браузер интерпретирует вашу страницу как очень старый стиль HTML, написанный в то время, пока не был опубликован даже HTML 3.2 (до 1997 года). Это так называется Quirks mode.

Чтобы решить эту проблему, вы должны включать в себя, прежде чем <html> линии как

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

или просто

<!DOCTYPE html> 

(стандарт HTML5). Более того, я строго рекомендую вам проверять свои HTML-страницы в каком-то HTML-варирадоре, например http://validator.w3.org/. Текущий код - это сочетание между HTML и XHTML, что не очень хорошо.

ОБНОВЛЕНИЕ 2: Я отправил дополнительно the feature request где я предложить, чтобы остановить создание jqGrid в случае document.documentMode <= 5, так что в случае использования Quirks mode (не <!DOCTYPE html ...>).

ОБНОВЛЕНО 3: На основе вопрос/ответ я отправил два предложения trirand: this и this. Оба предложения были приняты и теперь являются частями jqGrid (см. here и here). Поэтому у пользователя следующей версии не должно быть описанной проблемы.

+0

Это именно то, что я ищу. Но когда я попробовал '.ui-jqgrid {position: relative; font-size: 11px! important;} 'он просто изменил размер шрифта заголовка. Данные в таблице, а также на панели навигации оставались большими. Я попробовал ваше альтернативное предложение, и это тоже не сработало. – Dave

+0

@Dave: Причина может быть только ** еще одним CSS **, который вы используете. Просто откройте IE Developer Tools с помощью F12. Выберите вкладку «HTML». Нажмите «Обновить» (F5), чтобы загрузить данные страницы. Нажмите Ctrl-B или используйте меню «Поиск», а затем выберите любую ячейку сетки. В правой части прокрутите стили и найдите стиль CSS, где 'font-size' все еще активен. Это CSS, который делает проблему в вашем случае. В моей демонстрации это будет '.ui-widget .ui-widget {font-size: 1em; } ', как я описал в своем ответе. – Oleg

+0

Это я понимаю. Я не могу понять, как переопределить это значение только для jqGrid, но для всего jqGrid. Ваш ответ об использовании '! Important' отлично работает в вашем третьем примере, и именно это я и ищу. Но когда я это делаю, он только форматирует заголовок таблицы с правильным размером шрифта. – Dave

Смежные вопросы