jQuery Date Picker is bigger than the preview site

Question

I'm trying to test the jQuery calendar tool, but it appears to be too big, bigger than the preview page.

Any ideas?

Thanks!

Answer 1

In the css file change the font-size e.g. my css file happens to be

/css/smoothness/jquery-ui-1.8.1.custom.css

and I changed

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
}

to

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 0.7em;
}

Answer 2

I ran into the same problem. I had to change the font sizes in the custom CSS to something other than 1.25em. I believe that I used small as that was what I used elsewhere in my app.

While browsing the page in FireFox, I was able to inspect the entire calendar control in FireBug and change the font-size to medium (I think, maybe small) and it rendered perfectly at that point. Just went into the UI CSS and permanently changed it and no complaints since.

Check out my post here...

Answer 3

Or just add this css line:

#ui-datepicker-div {
    font-size:12px !important;
}

Answer 4

You can use Firebug's Inspect feature to select one of the values and you will see what stylesheets sets the size of the font. Then you can change it to fit your needs.