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

Ответ 1

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

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

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

Ответ 2

.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>

Он отменяет другие настройки, поэтому вы можете загрузить загружаемый google-сайт css, но использовать его для переопределения =)

Ответ 3

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

.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

Ответ 4

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

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

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

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

Ответ 5

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

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

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

Если нет, вы, по-видимому, имеете контроль над JS. Вы должны иметь возможность писать встроенные стили с этим.

ИЗМЕНИТЬ

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

Ответ 6

Чтобы сделать мой календарь меньшим, мне пришлось внести еще несколько изменений в 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>

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

Ответ 7

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

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

вместо

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

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

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

Ответ 8

Использовать масштабирование 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% от первоначальной ширины (т.е. до масштабирования), а не новой ширины после преобразования.

Ответ 9

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

Ответ 10

Независимо от размера, который вы хотите установить, отредактировав эту строку в 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; }

Он будет работать, я не знаю.

Ответ 11

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

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

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

Ответ 12

Мне просто пришлось споткнуться об этом, но попробуйте добавить html DOCTYPE к вашему документу

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

перед тем, как открыть html-тег.