altering jquery datepicker to work with blueprint css

Question

Does anyone have any pointers how to to fix the styling issue presented when using jquery ui's datepicker along side blueprint css framework? Specifically the table with the dates appears larger (wider) than the container it sits in.

Answer 1

Added the following CSS to solve the problem:

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

Answer 2

Hi there, Thanks for the help.

I found I had to make a couple more alterations before it looked closer to the default styling:

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

Answer 3

oneBelizean was on the right track, but it wouldn't work for me until I qualified the th and td selectors with table:

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

After doing this, I didn't need any of the extra stuff Simon added.

Answer 4

I tried the suggestions above, but they didn't do it for me. After playing around wit the problem for a few hours I came up with a solution that works for me (Blueprint 1.0, Jquery UI 1.8.5, tested with Smoothness, Redmond and Dark Hive themes in Chrome and 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; }