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

Answer 1

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 2

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

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