Blueprint CSS, влияющий на внешний вид средства выбора даты jQuery

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


css jquery-ui blueprint-css
person IaCoder    schedule 14.01.2009    source источник

Ответы (5)


arrow_upward
6
arrow_downward

Я пробовал другие ответы, но они не сделали это для меня. Поиграв с проблемой в течение нескольких часов, я нашел решение, которое работает для меня (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; }
person cvitan    schedule 22.10.2010
comment
Это отлично сработало для меня. Он также работает с несколькими темами. - person jlarry; 07.09.2011
comment
У меня заработало только после того, как я применил тему. До этого у него были очень большие колонны. Большое спасибо. - person nmat; 02.12.2011

arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

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

/*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; }
person Community    schedule 09.05.2009

arrow_upward
0
arrow_downward

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

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

После этого мне не понадобились какие-либо дополнительные вещи, добавленные Саймоном.

person Matt Hulse    schedule 29.10.2009

arrow_upward
0
arrow_downward

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

/* 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; }
person James Smith    schedule 09.08.2011