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

Question

Поэтому я загрузил пользовательский пользовательский интерфейс для jQuery и добавил элемент управления календаря на свой сайт (пример: текст ссылки ). В примере он показывает / отображает размер, который мне нужен, но на моей веб-странице он примерно в два раза больше. Зачем???

У меня есть масса других CSS, но я не могу контролировать внешний вид страницы (не могу коснуться текущего CSS, MEH !!). Можно ли посмотреть демо-версию на моем сайте?

Я думаю, что это код, который есть у jQuery UI, который может усложнить ситуацию

/* Component containers
----------------------------------*/
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; }
.ui-widget-content a { color: #616161; }
.ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(../images/ui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }
.ui-widget-header a { color: #fff; }

Это часть пользовательского интерфейса CSS

Answer 1

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

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

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

Answer 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, но используйте ее для переопределения =)

Answer 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

Answer 4

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

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

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

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

Answer 5

Использовать CSS zoom

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

Answer 6

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

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

вместо использования

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

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

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

Answer 7

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

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

Answer 8

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

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

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

Если нет, то вы, очевидно, имеете контроль над JS. Вы должны быть в состоянии написать встроенные стили с этим.

EDIT

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

Answer 9

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

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

перед открытием HTML-тега.

Answer 10

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

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

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