Peppered Lemons Peppered Lemons - 8 days ago 6
CSS Question

Changing the height of a jquery datepicker

I am trying to change the height of a datepicker I am using. I have been working through firebug and was able to change the width by editing the

ui-datepicker
class like so:

.ui-datepicker
{
width: 12em;
height: 12em;
}


The width works fine, but the height only changes the back of the calender, and not the cells so I end up with something like this:
Notice the height of the cells compared to the background

Where the height of the datepicker background has changed, but the cells are the same. In the class
.ui-datepicker table
I tired to add a line of code
height: 80%
, but the height will not go lower then 100% (or at least any lower will not change the appearance of the datepicker). I have been looking through the css to try to find where the height is set, but cannot find it so far.
Any suggestions?

Answer

i got it smaller changing the following two lines. i changed width on the datepicker from 14 to 12em; and set the font to .7em.

.ui-datepicker { width: 12em; padding: .2em .2em 0; display: none; }
.ui-datepicker table {width: 100%; font-size: .7em; border-collapse: collapse; margin:0 0 .4em; }