Small jQuery datepickers (CSS question)

Question

I implemented a jQuery datepicker on my site. That part all worked fine. The problem is that it's much too large! All the examples in the tutorials have nice small calendars but when I implement it (I'm using the Google hosted dot-luv css) it's really big. I've looked across the jQuery site but I can't find a standard css template with small calendars.

I need something like the calendar on http://jqueryui.com/demos/datepicker/#inline.

Is there an easy way to get that size or are they just teasing us?

Thanks!

Are you sure that the CSS is being correctly downloaded and it is included properly on your site? Have you tried to use the UI lightness theme on Google CDN first to make sure that works correctly? If you are doing those two things, do you have a screenshot of what you are seeing? — JasCav
– JasCav, Commented Apr 26, 2011 at 20:26
Yes, I've tried it with multiple different calendars, they all end up the same size. You can see it an example of what I get from the Google CSS at cse.msu.edu/~kaydiann/demo/testdate.php — Danni
– Danni, Commented Apr 26, 2011 at 20:30
Very interesting - I am seeing the problem, too. Have you tried NOT using Google's CDN (download the jQuery to your local environment). I tried Microsoft's CDN and that seemed to have the same issue. Not getting this problem on my own project, though...weird... — JasCav
– JasCav, Commented Apr 26, 2011 at 20:42
I inherited this from another programmer and she had a custom css stylesheet but it made the css even more squirrelly so I traded it out for the more stable (I had thought :P ) Google version. It seems absurd to make the calendar that big as default.... — Danni
– Danni, Commented Apr 26, 2011 at 20:46

Nathan · Accepted Answer · 2011-04-26 20:53:07Z

8

Change the font-size on your datepicker instance.

#datepicker {font-size:10px;}

answered Apr 26, 2011 at 20:53

Nathan

1061 bronze badge

Sign up to request clarification or add additional context in comments.

3 Comments

JasCav Over a year ago

@user726128 - This does seem to fix the problem, but I'm not getting why this is a problem in the first place. I agree with Danni in that the default calendar size shouldn't be this big. Strange.

Nathan Over a year ago

It is because the size of other elements inside the datepicker are relative to the size of the font of its parent element. If you look at the css you will notice all values are expressed in EMs.

goodeye Over a year ago

I had the opposite problem with the same fix. The parent font was small, so the calendar was tiny. I found the css entry was .datepick with a font-size, so I overrode that.

Collectives™ on Stack Overflow

Small jQuery datepickers (CSS question)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related