jQuery Date Picker is bigger than the preview site

Question

Hi,

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

Do you have any specific CSS that adjusts the font size? That would adjust any jQuery font sizes.

Answer 2

It is highly likely that a stylesheet is controlling this. Looking at the source of the web page, it is either this one:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css

or this one:

http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css

As you can see, they are pretty ugly as is, but you can run it through a prettifier like this one:

http://flumpcakes.co.uk/css/optimiser/

Or you can simply download a version of JQuery UI that has the lightness theme in it. My guess is that it has the correct sizes in it already.

Answer 3

Double check that you are using the same jQueryUI theme that the demo site is using. I have seen this exact problem by having the wrong theme loaded on my site.

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.

Answer 5

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 6

This has something to do with the css styles that jquery is using (This is tying in with everyone else's answer about the css), especially the font-size being in em compared to px - I think it is trying to inherit styles from the page itself, or something like that.

For me, the solution was to change the ui-widget css class's font-size to 11px, resulting in the following css class:

.ui-widget {
-x-system-font:none;
font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
**font-size:11px;**
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}