Как изменить размер элемента управления jQuery DatePicker

Question

Я впервые использую элемент управления jQuery DatePicker. У меня он работает с моей формой, но он примерно в два раза больше, чем хотелось бы, и примерно в 1,5 раза больше, чем демонстрация на странице пользовательского интерфейса jQuery. Есть ли какая-то простая настройка, которую мне не хватает для управления размером?

Редактировать: Я нашел подсказку, но это открывает новые проблемы. В файле CSS указано, что компонент будет масштабироваться в соответствии с размером шрифта родительского элемента. Они рекомендуют установить

body {font-size: 62.5%;}

, чтобы сделать 1em = 10px. Это дает мне удобный указатель даты, но, очевидно, он портит остальную часть моего сайта (в настоящее время у меня размер шрифта: .9em).

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

Answer 1

У меня указатель даты появился в модальном режиме, и из-за «даты-контейнера-контейнера» с левой стороны календарь был частично скрыт, поэтому я добавил:

.datepicker-date-display {
  display: none;
}

.datepicker-calendar-container {
  max-height: 21em;
}
.datepicker-day-button {
  line-height: 1.2em;
}

.datepicker-table > thead > tr > th {
  padding: 0;
}

Answer 2

open ui.all.css

в конце поставить

@import "ui.base.css";
@import "ui.theme.css";

div.ui-datepicker {
font-size: 62.5%; 
}

и иди!

Answer 3

Чтобы заставить это работать в Safari 5.1 с Rails 3.1, мне пришлось добавить:

.ui-datepicker, .ui-datepicker a{
 font-size:10px;
}