Reputation: 6689

Styling the jQueryUI DatePicker

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?

Upvotes: 26

Answers (8)

Clay

Reputation: 101

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; }

Upvotes: 10

jlee88my

Reputation: 3043

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.

Upvotes: 11

Half_Duplex

Reputation: 5234

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;}

Upvotes: 2

MrHus

Reputation: 33378

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.

Upvotes: 24

SikoSoft

Reputation: 585

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.

Upvotes: 9

eksith

Reputation: 156

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.

Upvotes: 5