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

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 2

This is a bit late, but for future reference only: Add this between your , after the jquery ui css reference.

<style type="text/css">
    .ui-datepicker { font-size: 9pt !important; }
</style>

and it will become smaller.

Answer 3

jQuery UI has a theme roller that allows you to customize one of the existing themes including the fonts, colors and backgrounds before downloading. You can do other things like set the corner radius, margins and padding.

I'd recommend trying to customize it as much as you can before downloading so you'll have less to tinker when using it on your site.

Remember to set the default font sizes and such for the whole page after you've called the jQuery UI stylesheet.

Answer 4

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 5

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 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.