Календарь jQuery UI отображается слишком большим, хотите демонстрационный размер?

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

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

Отлично работает, если кому-то еще нужно что-то подобное

.ui-widget{ font-size: 0.8em; }

Это решение, но я не знал, если вы поместите его в элемент head следующим образом:

<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
</style>

Он переопределяет другие настройки, поэтому вы все равно можете загружать CSS, размещенный в Google, но используйте это, чтобы переопределить его =)

Чтобы исправить размер календаря, измените это:

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

к этому:

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }

Для получения подробных инструкций посетите - http://blog.greatdevelopers.com/?p=33

Если вы хотите установить размер шрифта или семейство шрифтов для всех виджетов jQuery, было бы лучше установить что-то вроде этого:

.ui-widget {
    font-size: .7em;
}

после вызова загрузки файлов CSS jQuery UI.

Все компоненты пользовательского интерфейса jQuery являются виджетами и наследуют стиль .ui-widget на верхнем уровне.

Инспектор DOM (например, Firebug, IE Developer Toolbar и т. Д.) Должен помочь вам определить, какие стили CSS влияют на ваш календарь.

Возможно, какая бы сторона не позволяла вам прикасаться к CSS, позволила бы вам свободно властвовать в контейнере? Т.е.,

<div id="foo">Your stuff goes here. All your selectors must start with #foo</div>

В противном случае вы, по-видимому, контролируете JS. С его помощью вы сможете писать встроенные стили.

РЕДАКТИРОВАТЬ

Вы также можете посмотреть, сможете ли вы обернуть свой контент в iframe.

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

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

Но это только уменьшило размер заголовка (месяц год). Чтобы уменьшить метки дней недели и номера дней, мне также пришлось скопировать следующие две строки из jquery-ui-1.8.18.custom.css и поместить их на свою страницу, но затем мне также пришлось добавить шрифт -размеры для обоих.

.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;}
.ui-datepicker td { border: 0; padding: 1px; }

В итоге я получил следующее:

<style type="text/css">
div.ui-datepicker{ font-size:7px;}
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size: 1.6em;}
.ui-datepicker td { border: 0; padding: 1px; font-size: 1.6em;}
</style>

Это позволяет мне контролировать размер шрифта для даты и года, меток дней недели и номеров дат.

Я рекомендую вам использовать

.ui-datepicker { font-size:10px !important; }

Вместо того, чтобы использовать

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

потому что селекторы классов css имеют более широкую область действия по сравнению с использованием селекторов элементов, которые предназначены только для определенного элемента. Все, что вам нужно сделать, это создать еще один элемент html типа класса, и вам вообще не нужно ни о чем беспокоиться.

Однако в вашей проблеме вам не нужно ничего делать, просто добавьте селектор классов в свой собственный файл css, НЕ тот, который для jquery-ui, и вы отсортированы, если вам нужно создать еще один datepicker, вам не придется беспокоиться о снова изменив CSS таким образом.

Использовать масштабирование CSS

.ui-widget{ 
    -ms-transform: translate(-15%,-15%) scale(0.7);//translate must be before scale
    -moz-transform: translate(-15%,-15%) scale(0.7);
    -webkit-transform: translate(-15%,-15%) scale(0.7);
    transform: translate(-15%,-15%) scale(0.7);
}

В приведенном выше коде я использовал «sclale (0.7)», что означает, что новые ширина и высота будут составлять 70% от исходных значений. Элемент после преобразования будет иметь тот же центр исходного элемента, поэтому ширина уменьшится на 30%, что означает уменьшение на 15% слева и 15% справа, то же самое для высоты. Поэтому мы должны использовать translate, чтобы переместить новый элемент в верхний левый угол. "translate" должно быть перед "scale", поэтому "15%" будет 15% от исходной ширины (т.е. до масштабирования), а не от новой ширины после преобразования.

Убедитесь, что на вашей странице нет конфликтов css - например, настройки размера шрифта html / body или контейнера, которые будут переходить в календарь.

Какой бы размер вы ни выбрали, вы можете установить, отредактировав эту строку в css.

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

просто укажите другой размер шрифта, например .5em или .8em

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

Это будет работать, я этого не делал.

Это просто: Jquery-ui просто выполняет свою работу, используя объектный стиль. Я имею в виду :

<html>
   <body
     <input type="text" id="date"/>
     <script type="text/javascript"> $("#date").datepicker()</script>
   </body>
</html>

Размер номера даты и имени munth будет установлен в зависимости от: $ ("# date"). Css ("font-size"). Итак, если размер шрифта для ввода 6 пикселей, datepicker будет выглядеть маленьким. Если размер шрифта 42pt, это будет выбор даты вслепую!

Я случайно наткнулся на это, но попробуйте добавить HTML-код DOCTYPE в свой документ.

<!DOCTYPE html>
<html>
    <body>
    </body>
</html>

перед открывающим тегом html.