jQuery UI Calendar displays too large, would like the demo size???

Question

So I downloaded a custom themed UI for jQuery and added the calendar control to my sight (Example: link text). In the example it shows/displays the size I would like but on my webpage it's about twice the size. why???

I do have a ton of other CSS but I don't have control over the look and feel of the page (Can't touch current CSS, MEH!!). Is there a way to get the demo look on my site?

I think this is the code that jQuery UI has that might be complicating things

/* Component containers
----------------------------------*/
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; }
.ui-widget-content a { color: #616161; }
.ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(../images/ui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }
.ui-widget-header a { color: #fff; }

It's part of the Custom UI CSS

Answer 1

A DOM inspector (e.g., Firebug, IE Developer Toolbar, etc.) should help you determine which CSS styles are affecting your calendar.

Perhaps whichever party is barring you from touching the CSS would allow you free reign within a container? I.e.,

<div id="foo">Your stuff goes here. All your selectors must start with #foo</div>

If not, you apparently have control over the JS. You should be able to write inline styles with that.

EDIT

You might also see if you can get your content wrapped in an iframe.

Answer 2

Check that you don't have css conflicts on your page - for example html/body or container font-size settings that would flow down to the calendar.

Answer 3

You can put the CSS from the demo site in a separate file and include it.

Answer 4

I figured it out. It was the font size that was throwing the whole thing off. I added this tag to correctly display the size I wanted:

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

Works great if anyone else needs something like this

Answer 5

was looking to solve the same problem and i just link the theme from googlecode and add just overlap the #ui-datepicker-div to set the font-size: 10px and walla!! tnx !

Answer 6

if you want to set font size or font family for all widgets of jquery, it would be better to set something like this

.ui-widget{ font-size:.7em; }

after the call to load jquery style css files.

All jquery ui components are widgets in jquery term and inherits the ui-widget style at the top level.

Answer 7

Hello Phill Pafford,

Whatever size you want You can set by editing this line in css.

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

just give another font size like .5em or .8em

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

It will work, i have dont it. Thanks

Answer 8

Hi,

To fix the size of the calendar control change this:

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

to this:

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }

For detailed instructions please visit - http://blog.greatdevelopers.com/?p=33

Answer 9

.ui-widget{ font-size:0.8em; }

That is the solution, but, what I didn't know is if you put it into the head element like this:

<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
</style>

It overrides other settings, so you can still load the google hosted css but use this to override it =)