it-swarm.com.ru

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

Поэтому я скачал пользовательский тематический интерфейс для 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

35
Phill Pafford

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

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

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

67
Phill Pafford
.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, но используйте это, чтобы переопределить ее =)

9
gideon

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

.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

8
Shekhar Agarwal

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

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

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

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

5
Harish

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

 enter image description here

1
Billel Hacaine

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

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

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

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

Правка

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

1
steamer25

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

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

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

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

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

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

1
A Malik

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

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

1
Vincent

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

0
ScottE

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

Это будет работать, у меня нет.

0
Praveen kumar Agrawal

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

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

до вашего открытия HTML-тега.

0
Michael

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

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

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

0
N Joly