Styling the jQueryUI DatePicker

Question

I am using the jquery datepicker (http://jqueryui.com/demos/datepicker/).

The datepicker on the demo page is small and compact. However, when I use the datepicker on my site, the calendar is HUGE. I would estimate that each date is using 12 pt font.

How do I get the days to be smaller?

Answer 1

The demo pages have quite a bit of extra CSS to 'fix' what comes in the packaged CSS that they don't mention anywhere. In my opinion, they do a poor job explaining this, especially with how many time the standard css uses !important.

Also, the ThemeRoller uses em as the default, which is % of a font set elsewhere.

Anyway, the dates are links, so to make them smaller, set a size for a around 9px.

Here's what I do before I use any jquery:

h1 {font-size:10px;}
h2 {font-size:11px;}
h3 {font-size:11px;}
p {font-size:11px;}
a {font-size:11px;}

Answer 2

The very top line of jquery.ui.theme.css has the font size:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: .9em; }

Answer 3

Are you including jquery-ui.css in your CSS declarations?

Also, the example page has a bunch of font-size declarations in its CSS.

Answer 4

The simple answer: You could add a font size in your css to ".ui-datepicker".

But I think you may have some css rules that are conflicting. You should use the method from Paulo's link to check if this is the case.

Answer 5

None of your CSS rules are conflicting - I can verify this with 100% confidence!

The reason for this is because jQuery's demo pages can be VERY misleading. As Seth said, their pages have lots of extra CSS rules added on top of the default library CSS. If you look here:

http://jqueryui.com/demos/demos.css

You will see they are making the base font size considerably smaller, which is the real cause.

I too was getting the same exact issue where I was getting a much larger date picker on my pages than they had on their demo. To confirm it was THEIR CSS which was "conflicting", I used the CSS menu of the Web Developer Toolbar in Firefox to disable the above stated CSS file alone, and then all of the sudden THEIR demo site had large date pickers just the same size as mine.

Thus, the best answer here is incorrect - it is nothing on your end - it is entirely how THEY have decreased the base size. I guarantee you that if you try what I have mentioned here you will find the same thing.

Answer 6

They have a font-size of 10pt on the body. Remove that in firebug and youll probably see the same font sizes that your seeing on your page.