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






Добавлен следующий CSS для решения проблемы:
.ui-datepicker-calendar table{
margin: 0; }
.ui-datepicker-calendar th , .ui-datepicker-calendar td {
padding: 0; text-align: center; }
Спасибо за помощь.
Я обнаружил, что мне нужно сделать еще пару изменений, прежде чем он станет ближе к стилю по умолчанию:
/*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; }
oneBelizean был на правильном пути, но для меня это не сработало бы, пока я не квалифицировал селекторы th и td с помощью table:
.ui-datepicker-calendar table{
margin: 0; }
.ui-datepicker-calendar table th , .ui-datepicker-calendar table td {
padding: 0; text-align: center; }
После этого мне больше не понадобились дополнительные вещи, добавленные Саймоном.
Я попробовал другие ответы, но они не помогли мне. Поигравшись с проблемой в течение нескольких часов, я нашел решение, которое мне подходит (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; }
У меня сработало только после того, как я применил тему. До этого в нем были очень большие колонны. Большое спасибо.
Я обнаружил, что мне нужно получить доступ к элементам очень конкретно и удалить некоторые отступы.
/* 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; }
Это отлично сработало для меня. Он также работает с несколькими темами.