Blueprint CSS affecting appearance of jQuery datepicker

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.

score 6 · Answer 1 · edited Dec 24 '11 at 20:59

6

I tried the other answers, but they didn't do it for me. After playing around with 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; }

edited Dec 24 '11 at 20:59

Mike Pennington

41,899
19
136
174

answered Oct 22 '10 at 12:07

cvitan

61
1
3

This worked perfectly for me. It works on multiple themes as well. – jlarry Sep 06 '11 at 22:53
Worked for me only after I applied a theme. Before that, it had extremely large columns. Thanks a lot. – nmat Dec 02 '11 at 07:05

score 1 · Answer 2 · answered Jan 14 '09 at 22:04

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

answered Jan 14 '09 at 22:04

IaCoder

12,300
11
37
45

score 0 · Answer 3 · answered Oct 29 '09 at 19:09

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.

score 0 · Answer 4 · answered Aug 09 '11 at 09:38

I found I had to access the elements very specifically 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; }

score 0 · Answer 5 · answered May 09 '09 at 15:29

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

Blueprint CSS affecting appearance of jQuery datepicker

5 Answers5