CSS Blueprint влияет на внешний вид jQuery datepicker

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

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
4
0
2 428
5

Ответы 5

Добавлен следующий 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; }

Это отлично сработало для меня. Он также работает с несколькими темами.

jlarry 07.09.2011 02:53

У меня сработало только после того, как я применил тему. До этого в нем были очень большие колонны. Большое спасибо.

nmat 02.12.2011 11:05

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

/* 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; }

Другие вопросы по теме