Стилизация jQueryUI DatePicker - PullRequest
Новая
       12

Стилизация jQueryUI DatePicker

26 голосов
/ 21 августа 2009

Я использую jquery datepicker (http://jqueryui.com/demos/datepicker/).

DatePicker на демонстрационной странице маленький и компактный. Однако, когда я использую средство выбора даты на своем сайте, календарь ОГРОМНЫЙ. Я бы оценил, что каждая дата использует шрифт 12 pt.

Как мне сделать дни меньше?

Ответы [ 8 ]

24 голосов
/ 21 августа 2009

Простой ответ: Вы можете добавить размер шрифта в вашем CSS к ".ui-datepicker".

Но я думаю, что у вас могут быть некоторые правила CSS, которые противоречат друг другу. Вы должны использовать метод из ссылки Пауло, чтобы проверить, так ли это.

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

Это немного поздно, но только для дальнейшего использования: Добавьте это между своими, после ссылки jquery ui css. 

<style type="text/css">
    .ui-datepicker { font-size: 9pt !important; }
</style>

и станет меньше.

10 голосов
/ 31 октября 2010

Самая верхняя строка jquery.ui.theme.css имеет размер шрифта:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; <strong>font-size: .9em;</strong> }

9 голосов
/ 06 июля 2010

Ни одно из ваших правил CSS не противоречит - я могу убедиться в этом на 100%!

Причина этого в том, что демонстрационные страницы jQuery могут ОЧЕНЬ вводить в заблуждение. Как сказал Сет, на их страницах есть множество дополнительных правил CSS, добавленных поверх библиотеки CSS по умолчанию. Если вы посмотрите здесь:

http://jqueryui.com/demos/demos.css

Вы увидите, что базовый размер шрифта значительно уменьшается, что является реальной причиной.

У меня тоже возникла та же самая проблема, когда я получал на своих страницах гораздо больше средств для выбора даты, чем на своей демонстрации. Чтобы подтвердить, что это был «1010 * THEIR CSS», который «конфликтовал», я использовал меню CSS панели инструментов веб-разработчика в Firefox, чтобы отключить только указанный выше файл CSS, а затем внезапно демонстрационный сайт THEIR имел большой сборщики даты того же размера, что и мои.

Таким образом, лучший ответ здесь неправильный - это не ваша цель - это полностью, как ОНИ уменьшили базовый размер. Я гарантирую вам, что если вы попробуете то, что я упомянул здесь, вы найдете то же самое.

5 голосов
/ 21 августа 2009

jQuery UI имеет ролик темы , который позволяет настроить одну из существующих тем, включая шрифты, цвета и фоновые изображения перед загрузкой. Вы можете сделать другие вещи, такие как установить радиус угла, поля и отступы.

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

Не забудьте установить размеры шрифта по умолчанию и тому подобное для всей страницы после , когда вы вызвали таблицу стилей пользовательского интерфейса jQuery.

2 голосов
/ 07 октября 2012

Демонстрационные страницы имеют немного дополнительного CSS, чтобы «исправить» то, что входит в упакованный CSS, о котором они нигде не упоминают. По моему мнению, они плохо объясняют это, особенно с учетом того, сколько раз стандартное css использует! Важный.

Кроме того, ThemeRoller по умолчанию использует em, что составляет% от шрифта, установленного в другом месте.

В любом случае, даты являются ссылками, поэтому, чтобы сделать их меньше, установите размер около 9px.

Вот что я делаю перед тем, как использовать jquery: 

h1 {font-size:10px;}
h2 {font-size:11px;}
h3 {font-size:11px;}
p {font-size:11px;}
a {font-size:11px;}
1 голос
/ 21 августа 2009

Они имеют размер шрифта 10pt на теле. Удалите это в firebug, и вы, вероятно, увидите те же размеры шрифта, которые вы видите на своей странице.

1 голос
/ 21 августа 2009

Включаете ли вы jquery-ui.css в свои декларации CSS?

Кроме того, пример страницы содержит несколько объявлений размера шрифта в CSS.

...