Geek Answers Handbook

CSS syntax affecting jQuery datepicker look

Does anyone have any pointers on how to fix the styling issue presented when using jquery ui datepicker along the css frame border? In particular, a table with dates looks larger (wider) than the container in which it sits.

+4
source share
5 answers

I tried other answers, but they did not do this for me. After several minutes of working with the problem, 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; }
+6
source

The following CSS was added to solve the problem:

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

Thanks for the help.

I found that I had to make a couple more changes before it approached the default style:

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

oneBelizean was on the right track, but that would not work for me until I defined th and td selectors with a table:

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

After that, I did not need any additional material added by Simon.

0
source

I found that I needed to access the elements very specifically and remove some add-ons.

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

More articles:


All Articles