Проект CSS, влияющий на внешний вид jQuery datepicker - PullRequest
Новая
       9

Проект CSS, влияющий на внешний вид jQuery datepicker

4 голосов
/ 15 января 2009

Есть ли у кого-нибудь советы, как исправить проблему с стилем, представленную при использовании DatePicker из jquery ui в рамках side blueprint framework css? В частности, таблица с датами выглядит больше (шире) контейнера, в котором она находится.

Ответы [ 5 ]

6 голосов
/ 22 октября 2010

Я попробовал другие ответы, но они не сделали это для меня. Поработав над этой проблемой в течение нескольких часов, я нашел решение, которое мне подходит (Blueprint 1.0, Jquery UI 1.8.5, протестировано с темами Smoothness, Redmond и Dark Hive в Chrome и IE): 

/* remove blue backgrounds - separate for TH to work in IE */
.ui-datepicker-calendar tbody tr:nth-child(even) td,  
.ui-datepicker-calendar tbody tr.even td {
  background-color:inherit;
 }
.ui-datepicker-calendar thead th {
  background-color:inherit;
 }
/* set correct line height */
.ui-datepicker-calendar tbody tr td {  
  line-height: 1.1;
}
/* (optional)  make same size as example */
.ui-datepicker { font-size: 0.9em; }
1 голос
/ 15 января 2009

Добавлен следующий CSS для решения проблемы: 

.ui-datepicker-calendar table{
  margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
  padding: 0; text-align: center; }
0 голосов
/ 09 августа 2011

Я обнаружил, что должен был получить доступ к элементам очень специфично и удалить некоторые отступы. 

/* JQUERY-UI + BLUEPRINT CSS CALENDAR FIX */
.ui-datepicker table{
  margin: 0; }
.ui-datepicker-calendar thead tr th , .ui-datepicker tbody tr td {
  background:white; color:#333;  }
.ui-datepicker-calendar thead tr th{
  padding: 5px 0; }
.ui-datepicker-calendar tbody td{
  padding:0 2px 2px 0; }
.ui-datepicker-calendar tbody td a{
  padding:0 1px 0 0; }
.ui-datepicker-calendar {
  font-size:0.8em; }
0 голосов
/ 29 октября 2009

oneBelizean был на правильном пути, но он не будет работать для меня, пока я не квалифицирую селекторы th и td с таблицей: 

.ui-datepicker-calendar table{
  margin: 0; }
.ui-datepicker-calendar table th , .ui-datepicker-calendar table td {
  padding: 0; text-align: center; }

После этого мне не понадобилось ничего лишнего, что добавил Саймон.

0 голосов
/ 09 мая 2009

Спасибо за помощь.

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

/*JQUERY-UI + BLUEPRINT CSS CALENDAR FIX*/
.ui-datepicker-calendar table{
  margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
  padding: 0; text-align: center; background:white; color:#333;  }
.ui-datepicker-calendar th{
  padding: 5px 0; }
.ui-datepicker-calendar td{
  padding:0 2px 2px 0; }
.ui-datepicker-calendar td a{
  padding:0 1px 0 0; }
.ui-datepicker {
  font-size:0.8em; }
...