JQuery UI Тема слишком большая - PullRequest
Новая
       5

JQuery UI Тема слишком большая

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

Когда я загружаю тему jQuery-ui, что мне нужно добавить, чтобы настройки по умолчанию выглядели так же, как на демонстрационной странице jQuery-ui?

Диалог, который я вижу из коробкиОГРОМНО (см. ниже).Я знаю, что все CSS доступны для меня на демонстрационной странице, но я не совсем эксперт по CSS и не знаю, что взять и что оставить.

enter image description here

EDIT

Вот ссылка jsFiddle , показывающая то же самое.

РЕДАКТИРОВАТЬ

Ответы [ 6 ]

41 голосов
/ 11 декабря 2012

Лучший способ: изменить базовый размер шрифта jQuery-ui: 

.ui-widget{font-size:12px;}

См. эту скрипку для примера.

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

Понятно, в чем проблема: P 

body{font-size:10px;}

Размеры указаны относительно страницы (более гибкий макет).Таким образом (по крайней мере в скрипке) изменение размера шрифта тела исправляет это.Просто измените размеры шрифта ваших страниц, и диалог изменится вместе с ним.

http://jsfiddle.net/hnBmC/

1 голос
/ 11 декабря 2015

Если вы посмотрите на themeroller.css с вашим любимым инспектором веб-страницы, то найдете: - 

#themeroller {
    font-size: 10px;
}
#themeroller button,
#themeroller input,
#themeroller select,
#themeroller textarea {
    font-size: 12px;
}

Небольшое копание в HTML показывает, что <div id="themeroller"> охватывает всю «демонстрационную» область страницы, поэтому ВСЕ виджеты jquery-ui находятся внутри нее и поэтому принимают размеры шрифтов относительно этих значений.

Глядя на мою "слишком большую" страницу, обычный текст имеет размер шрифта 18 пикселей. Это происходит из .ui-widget в themes / ui-darkness / jquery-ui.css, имеющего font-size: 1em, который он вычисляет из базового размера шрифта моего браузера 16px. Я обнаружил этот базовый размер, проверив простой документ: 

<html><body>
<span style="font-size: 100%">here is some plain body text</span
</body></html>

Таким образом, ответ на вопрос о том, как установить размер шрифта для виджетов jquery-ui, состоит в том, чтобы установить размер шрифта для включающего элемента. <body> (в соответствии с рекомендациями Джозеф Марикл ) гарантированно поражает все, но может быть слишком широким для ваших нужд, в этом случае вам следует использовать внутренний <div> вместо этого. <span>, вероятно, зло, потому что вы не должны оборачивать вещи на уровне блоков в неблокированные - но проверьте это утверждение в полиции стилей CSS, я просто хакер!

Я собирался разглагольствовать о том, почему дизайнеры решили основывать высоты на em, то есть ширина , а не ex, что составляет высота . Однако я подозреваю, что ответ таков: em дает более согласованные результаты в более широком диапазоне шрифтов, так как в большинстве случаев высота буквы «l» примерно равна ширине буквы «m». И наоборот, если бы вы использовали 2ex в качестве основной меры, то вы получите странные высоты в шрифтах с очень короткими или очень длинными восходящими и спускающимися значениями по сравнению с высотой 'x'.

1 голос
/ 27 мая 2013

Для этой проблемы заголовка диалогового окна вы можете просто добавить нижеприведенный атрибут к родительскому классу диалогового окна 

.ui-dialog { clear: both; }

Для справки: jQuery UI Dialog Заголовок диалогового окна слишком высокий

0 голосов
/ 04 августа 2014

Вы можете использовать это правило CSS для применения меньшего размера шрифта:

.ui-dialog{font-size: 62.5%;}

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

jquery ui - это фреймворк, вы можете изменить его, создав новую или существующую тему: 

/*css which made title too large, reduce padding as you need*/
.ui-dialog .ui-dialog-titlebar {
    padding: 0.5em 1em 0.3em;
    position: relative;
}
...