JQuery Date Picker больше, чем сайт предварительного просмотра

Question

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

Есть идеи?

Спасибо!

Answer 1

В файле CSS измените размер шрифта, например, мой css файл оказался

/css/smoothness/jquery-ui-1.8.1.custom.css

и я изменился

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

до

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.7em;
}

Answer 2

Я столкнулся с той же проблемой. Мне пришлось изменить размеры шрифта в пользовательском CSS на что-то отличное от 1.25em. Я считаю, что я использовал маленький, поскольку это было то, что я использовал в другом месте в моем приложении.

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

Проверьте мой пост здесь ...

Answer 3

Или просто добавьте эту строку CSS:

#ui-datepicker-div {
    font-size:12px !important;
}

Answer 4

Это как-то связано со стилями css, которые использует jquery (это связано с ответом всех остальных о css), особенно размер шрифта в em по сравнению с px. со страницы или что-то в этом роде.

Для меня решение состояло в том, чтобы изменить размер шрифта класса CSS ui-widget на 11px, что привело к следующему классу CSS:

.ui-widget {
-x-system-font:none;
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
**font-size:11px;**
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}

Answer 5

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

Answer 6

Я столкнулся с подобной проблемой. Я решил проблему, проверив элементы с помощью инструмента разработчика Chrome, и понял, что элемент div, содержащий указатель даты (то есть, div с id ui-datepicker-div), добавлен к элементу body. У атрибута datepicker div font-size css установлен атрибут 1.1em (из класса ui-widget в базовом css-файле из jQuery UI). Поскольку я не установил размер шрифта для элемента body (то есть элемента, содержащего указатель даты), по умолчанию используется 16px в соответствии с этого блога . Установка явного font-size для элемента body решила проблему для меня.

Answer 7

Просто добавьте в свою строку CSS:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
font-size: 0.7em;

как это:

.ui-datepicker { width: 17em; font-size: 0.7em; padding: .2em .2em 0; display: none; }

Answer 8

Дважды проверьте, что вы используете ту же тему jQueryUI, что и демонстрационный сайт. Я видел именно эту проблему, загрузив неправильную тему на моем сайте.

Answer 9

Весьма вероятно, что таблица стилей контролирует это. Глядя на источник веб-страницы, он либо этот , либо этот .

Как вы можете видеть, они довольно уродливы, но вы можете запустить его через преттификатор, например this .

Или вы можете просто скачать версию пользовательского интерфейса JQuery, в которой есть тема легкости. Я предполагаю, что в нем уже есть правильные размеры.

Answer 10

У вас есть какой-нибудь конкретный CSS, который регулирует размер шрифта? Это позволит настроить любой размер шрифта jQuery.