it-swarm.com.ru

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

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

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

enter image description here

ПРАВКА

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

ПРАВКА

25
Adam Rackis

Я вижу, в чем проблема: P

body{font-size:10px;}

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

http://jsfiddle.net/hnBmC/

27
Joseph Marikle

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

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

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

41
undefined

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

.ui-dialog { clear: both; }

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

1
Soundar

Если вы посмотрите на 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> (в соответствии с рекомендациями Joseph Marikle ) гарантированно попадет во все, но может оказаться слишком широким для ваших нужд, и в этом случае вы должны использовать вместо него внутренний <div>. <span>, вероятно, зло, потому что вы не должны оборачивать вещи на уровне блоков в неблокированные - но проверьте это утверждение в полиции стилей CSS, я просто хакер!

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

1
kbro

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

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

0
ARIJIT

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