Blueprint CSS and jQuery Datepicker

A quick post for those who have had problems with the formatting issues that arise when using the jQuery Datepicker with Blueprint. I took the fixes given here to come up with my own solution below.

Here’s the CSS that worked for me. All I’ve really done is very specifically access the elements the style concerns and remove some padding.

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

Hope it helps.

Advertisements
This entry was posted in Blueprint, CSS, jQuery, Uncategorized and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s