jQuery DatePicker Too Large - PullRequest
Новая
       17

jQuery DatePicker Too Large

16 голосов
/ 19 июля 2011

Я реализовал jQuery datepicker. Кажется, он работает нормально, но календарь слишком большой.

jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png

Сайт, над которым я работаю, имеет много слоев таблиц стилей, родительских страниц и элементов управления. И я не могу выделить то, что делает его большим. (Извините, сайт не является общедоступным.)

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

Ответы [ 7 ]

25 голосов
/ 19 июля 2011

Хотя изменение размера шрифта для .ui-widget работает, я получил лучшие результаты со следующим: 

#ui-datepicker-div { font-size:11px; }

Мало того, что это, кажется, делает именно то, что мне нужно, это также вряд ли повлияетлюбые другие виджеты jquery-ui.

7 голосов
/ 19 июля 2011

попробуйте установить font-size для класса .ui-datepicker

.ui-datepicker {font-size:11px;}

http://jsfiddle.net/pxfunc/ps5cA/

2 голосов
/ 28 июня 2013

Добавление этого на сайт. У меня сработало 

.ui-widget {
    font-size: .7em !important;
  }
2 голосов
/ 19 июля 2011

Требуется некоторое копание в firebug, но я включил одну из версий, которые я использую, чтобы уменьшить это. Ключ заключается в том, чтобы скопировать точные стили из CSS-файла jQuery-ui и поместить их в заголовок нужной страницы или в таблицу стилей CSS после таблицы стилей jQuery-ui. 

.ui-datepicker {
    padding: 0.1em 0.1em 0;
    width: 11em;
}

.ui-widget {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
}

.ui-datepicker th {
    border: 0 none;
    font-weight: normal;
    padding: 0.2em 0.1em;
    text-align: center;
}

.ui-datepicker th span {
    font-size: 11px;
}

.ui-datepicker td span, .ui-datepicker td a {
    padding: 0.1em;
}

.ui-datepicker td {
    padding: 0.9px;
}

.ui-datepicker .ui-state-highlight {
    height: 12px;
    margin-bottom: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    font-size: 10px;
    font-weight: normal;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 13px;
}

.ui-datepicker .ui-datepicker-title span {
    font-size: 11px;
}

.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {
    margin-left: -8px;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
    height: 15px;
    top: 1px;
    width: 15px;
}

.ui-datepicker-next-hover .ui-icon {
    height: 16px;
    width: 16px;
}
1 голос
/ 22 февраля 2016

Наш календарь был большим и уродливым с трудно нажимаемыми стрелками месяца. Это было вызвано несовпадением версий jquery-ui css и jquery-ui js include.

номера версий должны совпадать, например 

jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js

, но также требовалось рекомендованное выше css 

#ui-datepicker-div { font-size:11px; }
1 голос
/ 12 августа 2014

вы можете изменить "jquery-ui-1.10.4.custom.css" следующим образом 

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}
0 голосов
/ 12 августа 2012

Я согласен с mdmullinax. Вы должны изменить размер шрифта для всего класса

.ui-datepicker-div {font-size: 11px; }

, поскольку указатель даты не контролируется идентификатором, поэтому изменение ниже не влияет на размер

ui-datepicker-div {font-size: 11px; }

ч

...